Каскадные выпадающие списки jQuery с JSON и несколькими таблицами MySQL с использованием PHP

Я довольно плохо знаком с PHP и MySQL, имею небольшой опыт работы с jQuery и почти не имею опыта работы с JSON, просто чтобы дать вам некоторое представление. Я пытаюсь реализовать в моей форме каскадные выпадающие списки.

У меня есть две таблицы:

|city|
|city_id INT| - PK
|city VARCHAR (45)|
|state_state_id INT | - FK

|state|
|state_id INT| - PK
|state VARCHAR (25)|

Вот моя форма:

State:<br />
<select name="state" id="stateName">
<?php foreach($rows as $row): ?>
<option value="<?php echo htmlentities($row['state'],ENT_QUOTES,'UTF-8');?>"><?php echo htmlentities($row['state'],ENT_QUOTES,'UTF-8');?>
</option>
<?php endforeach; ?>
</select>
<br /><br />
City:<br />
<select name="city" id="cityName"></select>
<input type="submit" name="work_order_submit" id="" value="Add Work Order" />

Я заполняю раскрывающийся список State следующим запросом:

$query = "SELECT * FROM state WHERE 1 ORDER BY state";
try{
$stmt = $db->prepare($query);
$stmt->execute();
}catch(PDOException $ex){
//On production remove getMessage.
die("Failed to run query: " . $ex->getMessage());
}

$rows = $stmt->fetchAll();

Вот jQuery, который я создал, чтобы запустить JSON и заполнить раскрывающийся список City каскадными значениями из раскрывающегося списка состояний, когда состояние выбрано:

<script>
function populateCityName(){
$.getJSON('state-names.php', {stateName:$('#stateName').val()},
    function(data){
            var select = $('#cityName');
            var options = select.prop('options');
            $('option', select).remove();

            $.each(data, function(index, array){
                     options[options.length] = new Option(array['city']);
                     });

          });
}

$(document).ready(function(){
  populateCityName();
  $('#stateName').on('change', function(){
        populateCityName();
  });
});
</script>

А вот код в файле state-names.php (я подключаюсь к базе данных перед этим кодом):

$rows = array();
if(isset($_GET['stateName'])){
$query = "SELECT city FROM city INNER JOIN state ON city.state_state_id = state.state_id WHERE state = :state ORDER BY city";
$query_params = array(":state" => $_GET['stateName']);
try{
    $stmt = $pdo->prepare($query);
    $stmt->execute($query_params);
}catch(PDOException $ex){
    //On production remove .getMessage.
    die("Failed to run query: " . $ex->getMessage());
}
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);

Ничего не происходит, когда я выбираю состояние в форме. Я даже не получаю ошибку. Я протестировал SQL, и он работает нормально и получает значения, которые я хочу, но по какой-то причине, которую я не могу понять, значения не каскадируются в раскрывающемся списке City.

Любая помощь очень ценится.

РЕДАКТИРОВАТЬ: Поскольку я делаю больше отладки и реализации нескольких вещей, это то, что я нашел до сих пор. JSON приходит так:

[{"city":"Salt Lake City"},{"city":"Toole"},{"city":"Provo"},{"city":"St. George"}]

Теперь я знаю, что JSON работает правильно. Когда я изменил раскрывающийся список в раскрывающемся списке состояний на состояние, в котором, как мне известно, были записи для городов, в раскрывающемся списке городов отображались пустые поля "option" для количества записей, которые фактически были. Итак, используя ответ ниже и МНОГИЕ различные учебные пособия по каскадным выпадающим и цепным выпадающим спискам, я наконец-то понял это. Я отправил ответ с рабочим кодом.

Источник

2 ответа

Решение

Ты можешь попробовать:

$.each(data, function(index, array){
    // new Option(text [, value, defaultSelected, selected]);
    select.add(new Option(array['city'], index), null);
});

??

Источник

Весь приведенный выше код работал, кроме функции jQuery. Ну, jQuery работал для того, что я сказал, а не для того, что я действительно хотел, чтобы код делал... Большая разница.

Вот рабочий jQuery, который заполняет раскрывающийся список городов на основе выбора, сделанного в раскрывающемся списке состояний:

<script>
function populateCityName(){
$.getJSON('state-names.php', {stateName: $('#stateName').val()},
    function(data){
        var html = '<option value="';
        var htmlEnd = '</option>';
        var options = '';
        var select = $('#cityName');
        $('option', select).remove();
        $.each(data, function(index, array){
            options += html + array['city'] + '">' + array['city'] + htmlEnd;
         });
        $('#cityName').append(options);
    });
}

$(document).ready(function(){
  populateCityName();
  $('#stateName').on('change', function(){
        populateCityName();
  });
});
</script>

Раньше код находил количество записей, а в поле выбора показывалось бы это число, но выбор был пустым. С помощью этого кода число записей найдено, но значения для этих записей также отображаются. Надеюсь, это поможет кому-то еще позже.

Источник
Другие вопросы по тегам