使用PHP级联JSON和JSON的jQuery下拉列表

Question

我刚接触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();

这是我创建的用于运行JSON并在选择状态时使用状态下拉列表中的级联值填充City下拉列表的jQuery：

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

Answer 1

你能试一下吗：

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

??

Answer 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>

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