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

Posted 2023-03-03

【中文标题】Html：根据第一个选择器过滤第二个选择器

【英文标题】：Html: filter the second selector based on the first selector

【发布时间】：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。您将在底部看到一个小窗口。单击控制台选项卡并刷新您的页面

【参考方案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文件放到这些源文件应该所在的静态文件夹中。