從外部JSON文件生成選擇列表

Question

我想從基於初始選擇的JSON文件生成選擇菜單。我見過很多不同的方式，人們爲此寫了一個函數，但想要一些非常簡單的東西。

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 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"} 
    ] 
    } 
] 

我想從外部JSON文件中使用的數據。練習1/2/3是從最初的選擇，然後區域是爲生成的選項。道歉，如果非常模糊。

Answer 1

我從您的JSON中刪除了一些冗餘來嘗試和進一步簡化您的代碼。您可以通過將{"area": "Electric Power Regulation"}更改爲"Electric Power Regulation"，然後{text:this.area,value:this.area}更改爲{text:this,value:this}來進一步簡化它。

var options = { 
 
    "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"} 
 
    ] 
 
    }, 
 
    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); 
 
    }); 
 
    } 
 
});

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

注意：

如果JSON之際，你在你的問題指出，你可以用它消耗的前幾行代碼進行調整。