Question

我正在尝试创建动态下拉列表。出于某种原因，jQuery在我的示例中不适用于JSON。这是我第一次使用JSON而且我已经习惯了它。我也用Google搜索了，但没有运气。这是我的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是头标记。

Answer 1

您不需要使用switch这样的语句。以下

怎么样？

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

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

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

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

JQuery没有使用JSON

1 个答案: