從下拉菜單創建復選框

Question

我試圖為我的問題尋找一種可行的解決方案，但是經過數天的研究，仍然無法解決問題，這就是為什么我尋求您的幫助。

基本上，我想做的是有一個下拉菜單，其中包含若干年的組選項。 因此，例如，下拉菜單中將包含第7年，第8年，第9年等。

一旦他們選擇了7年級，系統將只創建一個復選框。 對於8年級和9年級，應該創建兩個復選框，因為它們可以選擇一個或兩個主題。

如果下拉菜單未更改，則不應有任何復選框。

我希望所有這些都有道理，你們將能夠給我答案。 提前致謝。

Answer 1

已經有很多Google答案，許多jQuery插件和SO答案已被問及解決。 為什么不為您接受或您僅需要什么？

Answer 2

然后是這樣的：

 var subjectMap = { 'Year 7' : ['Maths'], 'Year 8' : ['Maths', 'English'], 'Year 9' : ['Maths', 'English', 'French'], 'Year 10' : ['French', 'History', 'Geography'] } $( document ).ready(function() { for (var year in subjectMap) { $('#yearGroup').append($('<option>', {value:year, text:year})); } $('#yearGroup').change(function () { var selectedYear = $("#yearGroup option:selected").val(); $("input:radio[name='subjects']").hide().attr('checked', false); $("input:radio[name='subjects']").each(function(){ $("#label"+ $(this).val()).hide(); }); for (var availableSubject in subjectMap[selectedYear]) { $("#" + subjectMap[selectedYear][availableSubject]).show(); $("#" + subjectMap[selectedYear][availableSubject]).each(function(){ $("#label"+ $(this).val()).show(); }); } }).change(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='yearGroup'></select><br> <label for="Maths" id="labelMaths">Maths</label><input type="radio" name="subjects" value="Maths" id="Maths"> <label for="English" id="labelEnglish">English</label><input type="radio" name="subjects" value="English" id="English"> <label for="French" id="labelFrench">French</label><input type="radio" name="subjects" value="French" id="French"> <label for="History" id="labelHistory">History</label><input type="radio" name="subjects" value="History" id="History"> <label for="Geography" id="labelGeography">Geography</label><input type="radio" name="subjects" value="Geography" id="Geography">