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

【问题标题】：Html: filter the second selector based on the first selectorHtml：根据第一个选择器过滤第二个选择器
【发布时间】：2019-03-13 23:13:58
【问题描述】：

Interface

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

下面是我用来做这项工作的 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>

【问题讨论】：

您面临的具体问题是什么？
@CodeThing 问题是第二个选择器不会根据第一个选择器的选择进行更新。
控制台中是否显示任何错误？好像你没有正确关闭$(document).ready(function(){
@CodeThing 不，我只是在 Chrome 中测试它，我在哪里可以看到错误？
在 chrome 上右键单击并单击“检查”或按 F12。您将在底部看到一个小窗口。单击控制台选项卡并刷新您的页面

标签： jquery html jquery-selectors

【解决方案1】：

你可以只使用getJson中的文件名

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

【讨论】：

"$.getJSON("http://127.0.0.1:8000/data.json", function(data) {"。这不起作用。顺便说一句，data.json 文件与 home.html 位于同一文件夹中。
website 文件夹是您网站的根目录吗？ D:/Programming/productDeliveryAutomation/mysite/App/templates/data.json 是吗？
"mysite" 是我网站的根目录。
您使用的网站网址是什么？
终于解决了，把json文件放到这些源文件应该所在的静态文件夹中。