выберите значение из поля <select>, соответствующее значению в предыдущем поле <select>

Question

У меня есть форма, написанная на php. В этой форме есть поле с именем 'State', а его параметры - это названия штатов. Есть еще одно поле с именем 'District', в опциях которого указаны названия районов. Опции этих двух полей извлекаются из базы данных. Существует около 28 штатов и около 12 округов для каждого штата. Теперь нужно, чтобы, когда кто-то выбирает штат, все округа, соответствующие этому состоянию, автоматически появляются в поле Округ.

Answer 1

Создание массива javascript, отображающего районы в состояния, например:

var map = [];
map['state1'] = ['district1', 'district2', ... ];
map['state2'] = ['district13', 'district14', ... ];

Затем первый выбор имеет функцию onChange, которая очищает параметры второго выбора и заполняет их из предопределенных значений в массиве.В jQuery:

$('select[name=state]').change(function(){
    var state = $(this).val();
    var options = '';
    foreach (map[state] as district){
        options = options + '<option>'+district+'</option>';
    }
    $('select[name=district]').html(options);
});

Answer 2

Вам потребуется javascript, чтобы реализовать это красиво.

Вот два варианта:

1. Загрузить район выбора / опции, используя ajax. Т.е. при изменении состояния AJAX-запрос запускается и перезагружается окно выбора округа.

2. Загрузка всех округов и скрытие неподходящих.

Преимущество варианта 2 заключается в том, что вам не нужно ждать завершения другого запроса, прежде чем они смогут выбрать район. Однако это потребует загрузки всех округов заранее. Итак, 300иш вариантов.

Answer 3

вы могли бы использовать вызов ajax

на выбранном месте onchange="changedist(this.value)"

и использовать функцию скрипта

function changedist(str)
{
if (str=="")
  {
  document.getElementById("dist").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("dist").innerHTML=xmlhttp.responseText;
    }


  }

xmlhttp.open("GET","./dist.php?q="+str,true);
xmlhttp.send();
}

и назовите это значение на своей странице <div id="dist"> here will returns the distrctis of the file dist.php</div>

и dist.php

$q = $_GET[q];
$sql= "select * from dist where state = $q";


$query ....


echo ' <select name=dist>';
while ($result = mysql_fetch_array($query))

{
echo " <option value=$result[key]>$result[dist]</option>";

}

так что это вернется на страницу формы при изменении состояния