-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 に答える