У меня есть 2 стола, провинции и районы. Я хотел бы заполнить поле выбора опциями в качестве имен округов, на основании которых выбранная провинция выбрана в другом выборе. В таблице «Районы» есть поле «Область», в котором указывается, к какой провинции она принадлежит. Я знаю, что это выполнимо, я просто не могу понять. Я также хочу создать и обновить новый выбор округов, не обновляя страницу.
UPDATE: Я пишу его в PHP и MySQL, используя jQuery как можно более экономно.
Для того, чтобы сделать это без 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>
Я на самом деле понял это самостоятельно, используя 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 у меня есть случай, который ловит режим и запускает следующий код:
<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;
Я не поклонник этого решения, и мне бы очень понравилось что-то получше, но он делает то, что мне нужно, чтобы это сделать на данный момент. Надеюсь, это поможет кому-то другому.
Создайте скрипт php и назовите его dp.php (dp, short для 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); )};
Вы не указали, какую серверную технологию вы используете (если есть). Вот пример в ASP.net – он должен указать вам в правильном направлении:
http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET