-1

我正在尝试创建一个动态下拉列表。出于某种原因，在我的示例中，jQuery 不能与 JSON 一起使用。这是我第一次使用 JSON，我已经习惯了。我也用谷歌搜索过，但没有运气。这是我的 HTML 代码：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
</head>
.
.
.

<select id="json-one">
    <option selected value="base">Please Select</option>
    <option value="beverages">Beverages</option>
    <option value="snacks">Snacks</option>
    <!--option value="snacks">Snacks</option-->
</select>
<br />
<select id="json-two">
    <option>Please choose from above</option>
</select>

JSON：

{
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
}

jQuery：

<script>
  $(function() {
    $("#text-one").change(function() {
      $("#text-two").load("textdata/" + $(this).val() + ".txt");
    });
    $("#json-one").change(function() {
      var $dropdown = $(this);
      $.getJSON("jsondata/data.json", function(data) {
        var key = $dropdown.val();
        var vals = [];
        switch(key) {
          case 'lw':
            vals = data.lw.split(",");
            break;
          case 'g1v1':
            vals = data.g1v1.split(",");
            break;
          case 's2v1':
            vals = data.s2v1.split(",");
            break;
          case 'base':
            vals = ['Please choose from above'];
        }
        var $jsontwo = $("#json-two");
        $jsontwo.empty();
        $.each(vals, function(index, value) {
          $jsontwo.append("<option>" + value + "</option>");
        });
      });
    });
  });
</script>

PS JQuery 在 head 标签中。

4

1 回答 1

2

你不需要使用这样的switch声明。下面怎么样

var vals = data[key] ? data[key].split(',') : ['Please choose from above'];

此外，您真的应该在 JSON 中为每个子选项使用一个数组，例如

{
    "beverages": ["Coffee","Coke"],
    "snacks": ["Chips","Cookies"]
}

这样，您就不必在split上面使用。

于 2013-09-18T06:35:37.240 回答