从下拉菜单创建复选框

Question

I've tried to look up a working solution for my problem, but after days of research a couldn't fine one, and that's why i'm asking for your help.

Basically, what i would like to do is to have a drop down menu, with several year group options in it. So for example the drop down menu would have year 7, year 8 year 9 etc inside of it.

Once they select year 7, the system would create only one checkbox. For year 8 and 9 there should be two checkboxes created, because they can choose either one or two subjects.

If the drop down menu is not changed, there should be no checkboxes.

I hope these all make sense and you guys will be able to give me an answer. Thanks in advance.

Answer 1

There is a lot of Google answers, dozen jQuery plugins and SO answers already asked and resolved about it. Why it's not acceptable for you or what exclusively you need?

Answer 2

Something like this then:

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