javascript - Generate select list from external JSON file -

javascript - Generate select list from external JSON file -

i trying generate select menu json file based upon initial selection. i've seen many different ways people have written function want simple.

html:

<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>

json:

[ { "practise one": [ {"area": "acquisition , leveraged finance"}, {"area": "asset-based lending"}, {"area": "bankruptcy"} ] }, { "practise two": [ {"area": "corporate governence"}, {"area": "derivatives"}, {"area": "high yield offerings"} ] }, { "practise three": [ {"area": "electric powerfulness regulation"}, {"area": "export control"}, {"area": "fcpa"} ] } ]

i want utilize info external json file. practise 1/2/3 initial select areas generated options. apologies if vague.

i removed redundancy json seek , farther simplify code. simplify farther changing, instance, {"area": "electric powerfulness regulation"} "electric powerfulness regulation", {text:this.area,value:this.area} alter {text:this,value:this}.

class="snippet-code-js lang-js prettyprint-override">var options = { "practise one": [ {"area": "acquisition , leveraged finance"}, {"area": "asset-based lending"}, {"area": "bankruptcy"} ], "practise two": [ {"area": "corporate governence"}, {"area": "derivatives"}, {"area": "high yield offerings"} ], "practise three": [ {"area": "electric powerfulness regulation"}, {"area": "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 > 0 ) { $.each( options[this.value], function() { sel2.append( $('<option/>',{text:this.area,value:this.area}) ).prop('disabled', false); }); } }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 two">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>

note:

if json comes you've indicated in question, adjust few lines of code before consuming it.

javascript jquery json select