使用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>

以前，代碼將找到條目數，並且選擇框將顯示該數字，但是選擇為空白。 使用此代碼，可以找到條目數，但是也會顯示這些條目的值。 希望以后能對其他人有所幫助。