Html：根据第一个选择器过滤第二个选择器

Question

Interface

如上图所示，我需要根据第一个选择器（地区）中的选择更新第二个选择器（产品）的选择。

下面是我用来完成这项工作的 JQuery 代码，在 Json 文件的帮助下（见下面的脚本）：

<script>
    $(document).ready(function(){
     $("#first-choice").change(function() {

    var $dropdown = $(this);

    $.getJSON("mysite/App/templates/data.json", function(data) {
        alert("Success");

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

        switch(key) {
            case 'APAC':
                vals = data.APAW.split(",");
                break;
            case 'MEA':
                vals = data.ME.split(",");
                break;
            case 'base':
                vals = ['Please choose from above'];
        }

        var $secondChoice = $("#second-choice");
        $secondChoice.empty();
        $.each(vals, function(index, value) {
            $secondChoice.append("<option>" + value + "</option>");
        });
    });
});
};
    </script>

Json 文件内容：{ "ER": "12", "FE": "few, SL" }

这是与选择器相关的 HTML 文件：

<h1>Region</h1>
<select id="first-choice">
  <option value="base">Please Select</option>
  <option value="EE">E</option>
  <option value="E">E</option>
</select>
<br>

<h1>Product</h1>
<select id="second-choice">
  <option>Please choose from above</option>
</select>

Answer 1

在getJson中直接使用文件名即可

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

Html：根据第一个选择器过滤第二个选择器

Html: filter the second selector based on the first selector

html

jquery

jquery-selectors