2

json/cities.json次の形式で私の国の州をその都市に関連付けるJSON ファイル ( ) があります。

{
    "State #1": [
        "City #1 from State #1",
        "City #2 from State #1",
        "City #3 from State #1"
    ],
    "State #2": [
        "City #1 from State #2",
        "City #2 from State #2",
        "City #3 from State #2"
    ]
}

次のように、状態を含む HTML 選択もあります。

<select id="state" name="state">
    <option value="State #1"> State #1 </option>
    <option value="State #2"> State #2 </option>
</select>

都市の空の HTML 選択:

<select id="city" name="city"></select>

私がやろうとしているのは、キー (州) でフィルタリングされた JSON 値で都市の HTML 選択を埋めることです。

次の jQuery スクリプトを使用しています。

$('#state').on('change', function () {
    var state = $(this).val(), city = $('#city');
    $.getJSON('json/cities.json', function (result) {
        $.each(result, function (i, value) {
            if (i === state) {
                 var obj = city.append($("<option></option>").attr("value", value).text(value));
                 console.log(obj);
            }
        });
    });
});

console.log問題は、次のマークアップを返す間、都市を入力する必要がある選択が変更されないことです。

<select name="city" id="city">
    <option value="City #1 form State #1, City #2 from State #1, City #3 from State #1">
        City #1 from State #1, City #2 from State #1, City #3 from State #1
    </option>
</select>

つまり、値は 1 つの値として返されますが、複数の値 (それぞれをカンマで区切ります) である必要があります。

4

3 に答える 3

3

都市ではなく州を繰り返し処理しています。result[state]それを反復する都市の配列を提供します。

PSコードのURL部分は、スニペットで機能させるためのものです

$('#state').on('change', function () {
    var state = $(this).val(), city = $('#city');
    city.empty();
    var url = URL.createObjectURL(new Blob(['{"State #1":["City #1 from State #1","City #2 from State #1","City #3 from State #1"],"State #2":["City #1 from State #2","City #2 from State #2","City #3 from State #2"]}'], {type:'application/json'}));
    $.getJSON(url, function (result) {
        if (result[state]){
            $.each(result[state], function (i, value) {
               city.append($("<option></option>").attr("value", value).text(value));
            });
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="state" name="state">
    <option value="State #1"> State #1 </option>
    <option value="State #2"> State #2 </option>
</select>
<select id="city" name="city"></select>

于 2016-01-01T21:40:35.630 に答える
1

わたしの提案：

$('#state').on('change', function () {
  var state = $(this).val(), city = $('#city');
  $.getJSON('json/cities.json', function (result) {
    var values = result[state];
    if (values != undefined && values.length > 0) {
      city.find('option').remove();
      $(values).each(function(index, element) {
        city.append($("<option></option>").attr("value", element).text(element));
      });
    }
  });
});

于 2016-01-01T21:40:53.813 に答える