javascript - Generate select list from external JSON file -

I am trying to generate a selection menu from a JSON file based on an initial selection. I have seen so many different ways that people have written a function for it but want to do something that is very easy.

  & lt; Select class = "form-control" id = "beta-filter 1" data-set = "default" data-selection = "practice" & gt; & Lt; Option label = "please select" value = "" & gt; Please select & lt; / Option & gt; & Lt; Option label = "practice one" value = "practice one" & gt; Practice A & lt; / Options & gt; & Lt; Option Label = "Practice Two" Value = "Practice Three" & gt; Do two exercises & lt; / Option & gt; & Lt; Option label = "practice three" value = "practice three" & gt; Practice Three & lt; / Option & gt; & Lt; / Select & gt; & Lt; Select class = "form-control" id = "beta-filter2" data-set = "default" data-selection = "law" disabled & gt; & Lt; Option label = "please select" value = "" & gt; Please select & lt; / Option & gt; & Lt; / Select & gt; ["Region": "Acquisition and Leverage Finance"}, {"Area": ​​" 

(" Area ":" Corporate Administration "}, {" Area ":" Derivation " } "{Practice three:", "property", "region", "property", "area": ​​"bankruptcy"}}, {"practice two": "high yielding offerings"}]}, [["area": ​​" Electricity Regulation "}, {" Area ":" Export Control "}, {" Area ":" FCPA "}]}]

I use data from an external JSON file Practice 1/2/3 from the initial selection, f Sorry, if there is too much ambiguity.

I tried and used my code For example, you can change this, for example, {"area": ​​"electric power regulation"} to simply "Electric Power Regulation" , then will change to {text: This.area, value: this.area} {text: this, value: this} .

  var options = {" "", "Practice A ":" area ":" estate ":" property-based debt "}, {" area ":" bankruptcy "}]," practice two ": [area": ​​"[area": ​​"area": ​​"area" "Regional": "" field ":" derivation "}, {" area ":" high object offerings "}]," three exercises ": [[" area ":" electric power regulation "}, {" : "Export Control"}, {"Area": ​​"FCPA"}}}, sel1 = $ ('# beta-filter1'), sel2 = $ ('# Beta-filter2 '); Sel1.on ('change', function () {$ ('option: gt (0)', sel2) .remove (); sel2.prop ('disabled', true); if (this.selectedIndex & gt; 0 ) {$ .each (option [this.value], function () {sel2.append ($ ('& lt; option / & gt;', {text: this.area, value: this.area})). Prop ('disabled', wrong);});}});  

  & lt; Script src = "https: //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> & Lt; Select class = "form-control" id = "beta-filter1" data-set = "default" data-selection = "practice" & gt; & Lt; Option label = "please select" value = "" & gt; Please select & lt; / Option & gt; & Lt; Option label = "practice one" value = "practice one" & gt; Practice A & lt; / Options & gt; & Lt; Option label = "practice two" = "practice two" & gt; Do two exercises & lt; / Options & gt; & Lt; Option label = "practice three" value = "practice three" & gt; Practice Three & lt; / Option & gt; & Lt; / Select & gt; & Lt; Select class = "form-control" id = "beta-filter2" data-set = "default" data-selection = "law" disabled & gt; & Lt; Option label = "please select" value = "" & gt; Please select & lt; / Option & gt; & Lt; / Select & gt;