Я создал два спуска (например, состояние и город), извлекая записи обоих выпадающих списков из базы данных mysql и пытаюсь создать инструмент, в котором при выборе любого значения (то есть любого состояния) из первого выпадающего списка в это время во втором падении (в городе) должны быть видны только те значения (города) под этим значением (состоянием), выбранным при первом выпадающем списке.
Вот мой код:
<tr> <td id='hed'><span style="font-family:verdana,geneva,sans- serif">State</state></td> <td> <?php $dbcon = mysql_connect("@ip","@username","@password"); if($dbcon) { mysql_select_db("@database", $dbcon); } else { die('error connecting to the database'); } $qry = "select @value(state) from @tablename "; $result = mysql_query($qry) or die(mysql_error()); $dropdown = "<select name='@valuename' id='officeItemList' style='cursor:pointer;cursor:hand;'>"; while($row = mysql_fetch_array($result)) { $dropdown .= "\r\n<option value='{$row['@value']}' > {$row['@value']} </option>"; } $dropdown .= "\r\n</select>"; echo $dropdown; mysql_close($dbcon); ?> </td> </tr> <tr> <td id='hed'><span style="font-family:verdana,geneva,sans-serif">City</span></td> <td colspan="1"> <?php $dbcon = mysql_connect("@ip","@username","@password"); if($dbcon) { mysql_select_db("@database", $dbcon); } else { die('error connecting to the database'); } $qry = "select value2(city) from @tablename where "; $result = mysql_query($qry) or die(mysql_error()); $dropdown = "<select name='@value2' id='officeItemList' style='cursor:pointer;cursor:hand;'>"; while($row = mysql_fetch_array($result)) { $dropdown .= "\r\n<option value='{$row['@value2']}' > {$row['@value2']} </option>"; } $dropdown .= "\r\n</select>"; echo $dropdown; mysql_close($dbcon); ?> </td> </tr> Вы можете использовать AJAX для выбора городов для выбранного состояния. Что-то вроде:
$("select#state").change( function(){ var state = $(this).val(); $.ajax({ type: "GET", url: "get_cities.php/?state=" + state, // write a query according to the state selected and return the HTML for the OPTION's success: function(cities){ $("select#cities").html(cities); } }); } );
Вы также можете вернуть json-объект (в этом случае не забудьте добавить dataType:"json" ) и сделать переход на HTML на стороне клиента, то есть внутри функции success
Это неправильный путь. Ваш PHP-код полностью выполнен, прежде чем показывать страницу пользователю. Таким образом, второй запрос никогда не может знать, что пользователь что-то делает.
Правильно # 1: Сделайте это на двух страницах. Первая страница содержит первую комбо, и когда она отправляется, вторая страница генерируется и показывает второе комбо.
Правильно # 2, хотя и не оптимальный: сделайте это на одной странице. Загрузите все возможные записи для второго комбо в некоторый массив JS. Поместите слушателя в первый массив. Когда пользователь выполняет что-то, заполняет вторую комбинацию с правильными записями из JS-массива.
Правильный путь № 3 (самый правый из них): сделайте это на странице с запросом AJAX. Пользователь выбирает значение в первом комбо. Его прослушиватель отправляет запрос на какой-либо серверный скрипт, который возвращает JSON-объект с записями для второго комбо.
Есть два подхода, которые я бы предложил вам.
Сначала используется только php, но для хранения всех доступных городов в каждом состоянии до отображения страницы. Это плохое решение!
Я бы предложил использовать AJAX, а вызов Javascript на другой скрипт PHP может решить вашу проблему!
Используйте jQuery, чтобы получить фреймворк javascript, который делает жизнь проще!
Ваш HTML:
<select id="select-state"> <option value="0">Select a state</option> <option value="ohio">Ohio</option> </select> <select id="select-city"> <option value="0">Select a state first</option> </select>
Создайте php-скрипт, который делает запрос mysql с заданным состоянием через $ _GET ["state"] (или $ _POST).
Кодируйте результат из mysql как объекта JSON и повторяйте его!
{ cities: [ 'City 1', 'City 2', ... ] }
Функция php: json_encode ()
Затем вы можете сделать следующее:
$(function(){ $('#select-state').on("change", function(){ var state = $(this).val(); if(state!=0) { $.get('your/path/to/cities/script.php?state='+state,function(data){ if(data.cities) { $('#select-city').empty(); //remove old entries first for (var city in data.cities) { $option = $('<option>').val(city); $('#select-city').append($option); } } }); } }); });
Три быстрых пункта:
Обратите внимание, что все три вышеуказанных пункта легко достижимы с помощью фреймворка (по крайней мере, на стороне клиента, например CakePHP или Zend, но вы также можете искать Javascript, например Knockout.js для взаимодействия с пользовательским интерфейсом)