2

我有一个 JSON 文件 ( json/cities.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>

也就是说，这些值作为一个值返回，它应该是多个值（每个值用逗号分隔）。

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 回答
0

这是一个工作示例。我改变了一些东西来让它工作；代码中的注释。

首先，我将 JSON 嵌入到文档中以使其在代码片段中工作。更改此变量的来源非常简单。您也可以继续更改此版本中的 JSON，您将看到更改更新。

我没有遍历州并查看它是否与所选州匹配，而是利用 JSON 中的结构按名称索引城市。如果有许多状态，这会更有效，并且无论如何更容易编程。

我还在州标识符下的列表中添加了缺失的迭代。

我在列表中添加了对城市的清除，以便在更改列表时也会进行更改，否则城市列表将包括曾经选择 的所有州的所有城市。

虽然不是绝对必要的，但我认为向状态添加已选择、禁用的选项<select>是一个不错的选择——它强制用户选择一个状态并强制更新城市列表（否则默认选择状态 1，但需要做更多的工作填充该初始选择的列表，因为在首次定义元素时不会设置 onchange ）。 

/*
I'm embedding the JSON right in the page, but you'd 
use AJAX, of course.  You might want to pull this data just 
once or - if, it changes frequently and 
interaction with the form is prolonged, pull it
periodically, behind the scenes with a setInterval so the 
user doesn't have to wait for a web request.
*/
function get_state_data(){
   return JSON.parse($('#json').val())
};

// set the event handler after the doc is ready - 
// make sure it's set _after_ the elements it changes 
// are in the DOM
$(document).ready(function() {
  $('#state').on('change', function() {
    var state = $(this).val(),
      city = $('#city'),
      data = get_state_data();
    city.html(""); // clear out old cities
    // make use of the key->value structure of json,
    // rather than iterating over all cities
    if (data[state] === undefined)
      alert("No such state in data! :( ");
    else {
      //we have to iterate over each city
      for (c in data[state]) {
        city.append(
           $("<option></option>").attr("value", data[state][c]).text(data[state][c])
        );
      }
    }
  });
});
textarea {
  width: 95%;
  margin: auto;
  height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <textarea id='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" ] }
  </textarea>
</div>
<select id="state" name="state">
  <option disabled selected value=''>Select a state</option>
  <option value="State #1">State #1</option>
  <option value="State #2">State #2</option>
</select>
<select id="city" name="city"></select>

于 2016-01-01T21:59:37.760 回答