Создание и заполнение выбора динамически

Question

У меня есть 2 таблицы, провинций и районов.Я хотел бы заполнить поле выбора опциями в качестве Имени округа, основываясь на том, какая провинция выбрана в другом выборе.Таблица Districts имеет поле ProvinceID, чтобы указать, к какой провинции он принадлежит.Я знаю, что это выполнимо, я просто не могу понять это.Я также хочу создать и обновить новые районы, не обновляя страницу.

ОБНОВЛЕНИЕ: Я пишу это на PHP и MySQL, используя jQuery как можно реже

Answer 1

Для того, чтобы сделать это без AJAX, предварительно заполняйте набор данных Javascript ... предупреждение, если у вас много данных, это может быть медленно, но если это управляемая длина списка, вы можете сэкономить некоторые накладные расходы от загрузки нескольких запросов AJAX.одни и те же данные много раз.

var provinces = {};
provinces['province_a_id'] = [
  { name:'District A', id:'district_a_id' },
  { name:'District B', id:'district_b_id' }
];
provinces['province_b_id'] = [
  { name:'District C', id:'district_c_id' },
  { name:'District D', id:'district_d_id' }
];

function getDistricts( referenced_select ) {
  var selected_province = $(referenced_select).val();
  var district_select = $('#districts');
  district_select.empty();
  if ( provinces[selected_province] ) {
    $.each( provinces[selected_province], function(i,v) {
      district_select.append( $('<option value="' + v['id'] + '">').text( v['name'] ) );
    } );
  }
}

$(document).ready( function() {
  $('#provinces').bind( 'change', function() {
    getDistricts(this);
  } );
} );

- HTML

<select id="provinces" name="provinces">
  <option value="province_a_id">Province A</option>
  <option value="province_b_id">Province B</option>
</select>
<select id="districts" name="districts">
</select>

Answer 2

Сделайте php-скрипт и назовите его dp.php (dp, сокращение от data_provider, используйте любое имя, которое вам нравится).В dp.php

// get province id passed in via `post` or `get`
$pid = $_REQUEST['pid'];

// get the districts in that province
$query = "SELECT `district_id`, `district` FROM `districts` WHERE province_id` ='$pid'";

// link to your database
$link = mysqli_connect(HOST, USER, PASS, DBNAME);

// execute your query
$result = mysqli_query($link, $query);

// parse the options
while($row = mysqli_fetch_assoc($result)) {
  $options .= '<option value="' . row['district_id'] . '">' . $row['district'] . "</option>\n";
}

// send options
echo $options

Со следующей разметкой на вашей странице:

<select id="province" name="province">
  <option value="ny">New York</option>
  ...
</select>

<select id="district" name="district">
</select>

Включите следующий jQuery:

// whenever a different province is selected
$('#province').change(function() {
  // remove all options in district select
  $('#district').html('');
  // find the new province selected
  var my_province = $('#province').val();
  // get new options from server and put them in your district select
  $('#district').get('path/to/dp.php?pid=' + my_province);
)};

Answer 3

Я на самом деле понял это самостоятельно, используя jQuery и post.При первичном выборе я добавил onchange = "getDistricts ()" и использовал это для этой функции:

function getDistricts()
{
    var province_id = $("#provinces").val();
    $.post("handler.php",
    {
        "mode" : "get_districts",
        "pid" : province_id
    },
    function(data)
    {
        $("#districts").html(data);
    }, "text");
}

А затем в handler.php у меня есть случай, который перехватывает режим и выполняетcode:

<query on districts table>
while($row = $sql->fetchrow($result);
{
    $id = $row['id'];
    $name = $row['name'];
    $html .= "<option value='$id' id='$id'>$name</option>";
}
echo $html;

Я не фанат этого решения и действительно хотел бы чего-то лучшего, но сейчас он делает то, что мне нужно.Я надеюсь, что это может помочь кому-то еще.

Answer 4

Вы не указали, какую серверную технологию вы используете (если есть).Вот пример в ASP.net - он должен указывать вам правильное направление:

http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET