javascript - 带 Json 数据的下拉框

Question

我正在尝试使用 jquery 使用以下 JSON 数据填充下拉框

    {
     "Name":["A","B","C"],
     "Movie":["X","Y","Z"]
    }

这是我到目前为止所做的脚本

   $("#firstbox").change(function(){
    var $selection=$(this);

   $.getJSON("data.json",function(data){
    var i=$selection.val();
    var arr=[];

    switch(i){
        case 'Name':
            arr=data.Name.split(",");
            break;
        case 'Movie':
            arr=data.Movie.split(",");
            break;
    }       

    });

    });

我的基本index.html就是这样

   <select id="firstbox">
            <option selected value="">---Select---</option> 
            <option value="Name">Name</option>
            <option value="Movie">Movie</option>
   </select>

   <select id="secondbox" name="">
            <option selected value="">---Generate---</option>
            <script src="myjs.js"> </script>
   </select>

“secondbox”下拉列表应生成与“firstbox”下拉列表的选择相对应的值。我收到的错误是“未定义的分割函数”。谁能给我提示吗？

谢谢

Answer 1

split 是 String 对象的一个​​方法，这里您在 Array 对象上使用它。 您不需要拆分，因为 Name 和 Movie 键都是 JSON 对象中的现成数组。

$("#firstbox").on("change", function(e){
    var sel=$(this).val(); 
    $("#secondbox").empty();
    $.getJSON("data.json",function(data){
        var values=data[sel] || ['Error : key not found'];
        $(values).each(function(index,element) {
             $("<option />", {value: element, text:element}).appendTo("#secondbox"); 
         });
    });
 });

这是一个工作示例:http://jsfiddle.net/cKBeE/