Я пытаюсь написать php-скрипт, который заполнит второе выпадающее меню, основанное на выборе основного выпадающего меню. Я хотел бы использовать jquery, чтобы делать все ненужные обновления. но все, что я обнаружил, что существует там, трудно понять и изменить, знаете ли вы что-либо, что было хорошо написано и понято, или, может быть, учебник, который существует там?
Вот какой код, который должен дать вам представление о том, что вы хотите сделать:
HTML
<select id="state" name="state"> <option value="IL">Illinois</option> <option value="IN">Indiana</option> </select> <select id="city" name="city"> <option value="">Please select a state...</option> </select> PHP
<?php $cities = array( 'IL' => array( 'Chicago', 'Naperville', 'Decatur', 'Saint Charles' ), 'IN' => array( 'Gary', 'Miller', 'Portage', 'Merrillville' ) ); print json_encode( $cities[ $_POST[ 'state' ] ] ); exit; ?>
JQuery
jQuery(document).ready(function() { jQuery('#state').change(function() { jQuery.post( 'some-url.php', { 'state':jQuery('#state').val() }, function(data, textStatus) { jQuery.each(data, function(index, value) { jQuery('#city').append('<option value="' + value + '">' + value + '</option>'); }); }, 'json' ); }); });
Есть немало примеров того, как это сделать в Интернете, хороший здесь, из Remy Sharp в своем блоге ( полный пример здесь )
В основном то, что вы делаете, вызывает страницу PHP на вашем сервере со значением вашего первого раскрывающегося списка, когда он изменяется. Например, если ваш первый выпадающий список является списком состояний в США, ваш второй раскрывающийся список может показывать города в выбранном состоянии. Когда выбрано первое раскрывающееся onChange событие onChange отключает запрос на страницу PHP на вашем сервере, передавая имя состояния ( example.com/city_lookup.php?state=NY )
Затем JQuery получает ответ от сценария city_lookup ( JSON-кодированный , вероятно, лучший способ перейти сюда), затем циклически перебирает его и записывает значения во второе раскрывающееся меню.
Добавьте еще одну строку jQuery('#city').html('');
Теперь код выглядит так:
jQuery(document).ready(function() { jQuery('#state').change(function() { jQuery('#city').html(''); jQuery.post( 'some-url.php', { 'state':jQuery('#state').val() }, function(data, textStatus) { jQuery.each(data, function(index, value) { jQuery('#city').append('<option value="' + value + '">' + value + '</option>'); }); }, 'json' ); }); });
два разных способа: