使用 PHP 使用 JSON 和多个 MySQL 表级联 jQuery 下拉列表答案

【问题标题】：Cascading jQuery Dropdowns with JSON and Multiple MySQL Tables using PHP使用 PHP 使用 JSON 和多个 MySQL 表级联 jQuery 下拉列表
【发布时间】：2013-03-29 04:43:13
【问题描述】：

我对 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" />

我用这个查询填充状态下拉列表：

$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 工作正常。当我将状态下拉列表中的下拉选择更改为我知道有城市条目的状态时，城市下拉列表显示实际存在的条目数量的空白“选项”字段。因此，使用下面的答案以及有关级联下拉列表和链接下拉列表的许多不同教程，我终于弄明白了。我已经提交了带有工作代码的答案。

【问题讨论】：

您是否检查过控制台的响应？
@Kishor 当你说控制台时，你指的是哪个控制台？
抱歉，您的浏览器控制台。
@Kishor 我正在使用 firebug 和 firefox 的内部错误报告，但都没有说有错误。
控制台有什么东西吗？

标签： php jquery mysql json cascadingdropdown

【解决方案1】：

你可以试试：

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

【讨论】：

我接受你的回答，不是因为它直接回答了我的问题，而是因为它迫使我更深入地调试我的代码。感谢您的帮助。

【解决方案2】：

上面的所有代码都可以工作，除了 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>

以前，代码会找到条目的数量，选择框会显示这个数字，但选择是空白的。使用此代码，可以找到条目数，但也会显示这些条目的值。希望这对以后的其他人有所帮助。

【讨论】：