javascript - 下拉列表中不显示任何数据的人口

Question

我编写了一个脚本，我需要根据使用 j-query 选择另一个下拉列表来填充下拉列表，但是当我选择第一个下拉列表时，另一个下拉列表不显示任何数据，如果我在某个地方出错，请帮助原谅我.!

script.html

<div class="form-group">
   <select id="json-one" class="form-control">  
     <option selected="" value="base">Please Select</option>  
     <option value="Doctor">Doctor</option>  
     <option value="Engineer">Engineer</option>  
     <option value="Lawyer">Lawyer</option>  
    </select> 
 </div>

<div class="form-group">
    <select id="json-two" class="form-control">  
        <option>Please choose from above</option>  
    </select>  
</div>


<script>
    var data = {
"Doctor":"General,specilist",
"Engineer":"Computers,electronic"
"Lawyer":"Civil,Criminal"
};
$("#json-one").change(function() {

                var $dropdown = $(this);

                //$.getJSON("data.json", function(data) {

                    var key = $dropdown.val();
                    var vals = [];

                    switch(key) {
                        case 'Doctor':
                            vals = data.Doctor.split(",");
                            break;
                        case 'Engineer':
                            vals = data.Engineer.split(",");
                            break;
                        case 'Lawyer':
                            vals = data.Lawyer.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>

Answer 1

您的代码应该可以正常工作，但您需要注意两件事。

1:您应该有一个 data.json 文件。

2:data.json 中的 JSON 对象应该具有与您在 get JSON 的成功回调中使用它相同的结构

{
  "beverages": "coke,pepsi",
  "snacks":"chips,biscuit"
}

你可以在下面的插件中看到它的工作原理。

笨蛋:http://plnkr.co/edit/2dI09RIDuFGc9XMKXU1h?p=preview