web-dev-qa-db-ja.com

jQueryを使用して、国と州に基づいて州と市のドロップダウンを作成します

JSONを使用してドロップダウンを実現しようとしています。 3つのドロップダウンが必要です。最初に国のドロップダウンを入力します（例：米国、英国など）。ここで、ユーザーがUSAを選択すると、jQuery .change（）を使用してドロップダウンにデータを入力する必要があることが示されます。ここでも、ユーザーが州を選択すると、都市のドロップダウンが表示される必要があります。

どうすればこれを達成できますか？私のJSONファイルは少し大きいので、ここに追加して、国のドロップダウンを設定しようとしましたが、州と都市のドロップダウンを生成できません...

http://jsfiddle.net/vCFv6/

$.each(myJson.country, function (index, value) {
$("#country").append('<option value="'+value.id+'">'+value.name+'</option>');});

上記のコードは、国のみを入力するのに役立ちますが、州や都市などの他のコードは入力できません。どんな助けでも大歓迎です。

前もって感謝します。

javascriptjqueryjsonajaxhtml-select
6
SpiritOfDragon

他の人が言ったように、国と州の選択入力のonchangeイベントを処理し、ロジックを適用する必要があります。国を選択するときに州を動的に取得するためにここでいじりました、残りを自分でコーディングできるかもしれません- Fiddle

他のドロップダウン値に基づいてこのドロップダウンを生成することも表示される場合があります

4
face

次のような3つのテキストボックスの.change()イベントをカスケードする必要があります。

  • 国の変更：
    • 州と都市のドロップダウンを空にします
    • 状態のドロップダウンを入力します（非同期）
  • 状態の変化：
    • 都市のドロップダウンを空にします
    • 都市のドロップダウンを入力します（非同期）

以下は、イベントハンドラーをチェーンする方法を示すドラフトアウトラインです。ドロップダウンは非同期的に入力されるため、依存するドロップダウンはAJAXリクエストの前に空になります。

$("#country").change(function () {
    $("#state, #city").find("option:gt(0)").remove();
    $("#state").find("option:first").text("Loading...");
    $.getJSON("/get/states", {
        country_id: $(this).val()
    }, function (json) {
        $("#state").find("option:first").text("");
        for (var i = 0; i < json.length; i++) {
            $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state"));
        }
    });
});
$("#state").change(function () {
    $("#city").find("option:gt(0)").remove();
    $("#city").find("option:first").text("Loading...");
    $.getJSON("/get/cities", {
        state_id: $(this).val()
    }, function (json) {
        $("#city").find("option:first").text("");
        for (var i = 0; i < json.length; i++) {
            $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city"));
        }
    });
});
5
Salman A

コードでは、選択を行うときにすべてのハンドラーを記述し、入力パラメーターに従ってJSONオブジェクトを照会し、国を作成したように、さらにドロップダウンを入力する必要があります。その場合、JSONのクライアント側のすべてのデータがあります。通常、この種のデータはデータベースにあるため、サーバーから取得する必要があります。

JQuery Autocomplete Widget で作成できます。

最初の選択では、国のオートコンプリートのみを有効にします。

ユーザーが選択を行った後、JavaScriptで州のソースを設定します（Countryパラメーターをメソッドに渡し、ユーザーが入力するときに、countryパラメーターに従ってサーバーから値を入力します）。

ユーザーが2.選択を行ったら、3番目のオートコンプリートを有効にし、入力「状態」パラメーターを設定し、市のオートコンプリートのパラメーターに従って値を入力します。

0
speti43

「前の」ドロップダウンの値を取得し、他のドロップダウンを除外する必要があります。基本的に、2つのオプションがあります。

  1. 3つのドロップダウンすべてにすべての値を設定します。次に、不要なものを除外します。
  2. 最初の値を選択したら、change（）イベントをフックし、選択した値を使用してバックエンドにajax呼び出しを行い、その国に対応する州と都市を返します。
0
Eric