0

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

4

2 回答 2

0

你能试一下吗：

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

??

于 2013-03-29T06:44:16.090 回答
0

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

Before, the code would find the number of entries and the select box would show this number, but the selections were blank. With this code, the number of entries is found, but the values for those entries also show. Hope this helps someone else later.

于 2013-04-03T19:03:21.673 回答