0

私は PHP と MySQL の初心者で、jQuery の経験はほとんどなく、JSON の経験はほとんどありません。フォームにカスケード ドロップダウンを実装しようとしています。

私は2つのテーブルを持っています:

|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();

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 をテストしたところ、問題なく実行され、必要な値が取得されましたが、何らかの理由で、値が都市のドロップダウンにカスケードされていません。

どんな助けでも大歓迎です。

編集:私はより多くのデバッグを行っていくつかのことを実現しているので、これが私がこれまでに見つけたものです。JSON は次のようになります。

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

JSONが正しく機能していることがわかった。州のドロップダウンのドロップダウン選択を、都市のエントリがあることがわかっている州に変更すると、都市のドロップダウンに、実際にあったエントリの数の空白の「オプション」フィールドが表示されました。したがって、以下の回答と、カスケード ドロップダウンと連鎖ドロップダウンに関するさまざまなチュートリアルを使用して、最終的にそれを理解しました。作業コードを含む回答を送信しました。

4

2 に答える 2

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>

以前は、コードがエントリ数を検出し、選択ボックスにこの数が表示されていましたが、選択肢は空白でした。このコードでは、エントリの数が検出されますが、それらのエントリの値も表示されます。これが後で他の誰かに役立つことを願っています。

于 2013-04-03T19:03:21.673 に答える
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 に答える