Как я могу заполнить выпадающий список, выбрав значение из другого раскрывающегося списка?

У меня есть два выпадающих списка (например, состояние и город), извлекая записи обоих выпадающих списков из базы данных 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>

Ответы

Ответ 1

Вы можете использовать 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

Ответ 2

Это неправильный путь. Ваш PHP-код полностью выполнен, прежде чем показывать страницу пользователю. Таким образом, второй запрос никогда не может знать, что пользователь что-то делает.

Правильно # 1: Сделайте это на двух страницах. Первая страница содержит первую комбо, и когда она отправляется, вторая страница создается и показывает вторую комбинацию.

Правильно # 2, хотя и не оптимальный: сделайте это на одной странице. Загрузите все возможные записи для второго комбо в некоторый массив JS. Поместите слушателя в первый массив. Когда пользователь выбивает что-то, заполните вторую комбинацию с правильными записями из JS-массива.

Правильный путь № 3 (самый правый из них): сделайте это на странице с запросом AJAX. Пользователь выбирает значение в первом комбо. Его слушатель отправляет запрос на какой-либо сервер script, который возвращает JSON-объект с записями для второго комбо.

Ответ 3

Есть два подхода, которые я бы предложил вам.

Сначала используется только php, но перед тем, как страница будет отображаться, необходимо сохранить все доступные города в каждом состоянии. Это плохое решение!

Я бы предложил использовать AJAX, а вызов Javascript на другой PHP Script может решить вашу проблему!

Используйте 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 Script, который делает запрос mysql с заданным состоянием через $_GET [ "state" ] (или $_POST).

Кодировать результат из mysql как объекта JSON и эхо его!

{
    cities: [
        'City 1',
        'City 2',
        ...
    ]
}

php function: 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);
                    }
                } 
            });
        }
    });
});

Ответ 4

Три быстрых пункта:

mysql небезопасен (вместо этого вы должны использовать PDO или mysqli)
Стиль должен быть указан с помощью CSS, а не встроенного
Вам лучше использовать асинхронный запрос, чтобы пользователь чувствовал себя быстрее

Обратите внимание, что все три вышеуказанных пункта легко достижимы с помощью фреймворка (по крайней мере, на стороне клиента, например CakePHP или Zend, но вы также можете искать Javascript, например Knockout.js для взаимодействия с пользовательским интерфейсом)