Javascript 从外部JSON文件生成选择列表

我试图根据初始选择从JSON文件生成一个选择菜单。我见过很多不同的方法，人们为此编写了一个函数，但是想要一些非常简单的东西

HTML:

---

我想使用外部JSON文件中的数据。练习1/2/3来自初始选择，然后区域用于生成的选项。如果非常模糊，我深表歉意。

我从JSON中删除了一些冗余，以尝试进一步简化代码。您可以进一步简化它，例如将{area:Electric Power Regulation}更改为简单的电力调节，然后{text:this.area，value:this.area}将更改为{text:this，value:this}

变量选项={ 练习一：[ {领域：收购和杠杆融资}， {领域：基于资产的贷款}， {地区：破产} ], 练习二：[ {领域：公司治理}， {面积：导数}， {地区：高收益产品} ], 练习三：[ {领域：电力监管}， {地区：出口管制}， {地区：FCPA} ] }, sel1=$'beta-filter1'， sel2=$‘beta-filter2’； sel1.关于“更改”，函数{ $'选项：gt0'，sel2.remove； sel2.道具“禁用”，正确； 如果选择此选项，则索引>0{ $.each选项[this.value]，函数{ sel2.append$，{text:this.area，值：this.area}.prop'disabled'，false； }; } }; 请选择 练习一个 练习两个 练习三 请选择

---

我刚刚注意到练习2和练习3在beta-filter2中显示相同的结果。修复你的HTML，一切都应该正常：练习2应该是value=practice two，而不是value=practice two。

<select class="form-control" id="beta-filter1" data-set="default" data-select="practise">
    <option label="Please select" value="">Please select</option>
    <option label="Practise one" value="Practise one">Practise one</option>
    <option label="Practise two" value="Practise three">Practise two</option>
    <option label="Practise three" value="Practise three">Practise three</option>
</select>
<select class="form-control" id="beta-filter2" data-set="default" data-select="law" disabled>
    <option label="Please select" value="">Please select</option>
</select>

[
  {
    "Practise one": [
        {"area": "Acquisition and Leveraged Finance"},
        {"area": "Asset-Based Lending"},
        {"area": "Bankruptcy"}
    ]
  },
  {
    "Practise two": [
        {"area": "Corporate Governence"},
        {"area": "Derivatives"},
        {"area": "High Yield Offerings"}
    ]
  },
  {
    "Practise three": [
        {"area": "Electric Power Regulation"},
        {"area": "Export Control"},
        {"area": "FCPA"}
    ]
  }
]