Creating checkboxes from drop-down menu

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.

A visualization of what your wanting to do would help. The second half of your question is confusing. — Darkrum, Feb 12 '17 at 16:58

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

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?

edited May 23 '17 at 12:25

Community

1
1

answered Feb 12 '17 at 17:01

Daniel

611
5
20

There are loads of jQuery plugins i know but I specifically wanted to do it with javascript. – leveeee Feb 13 '17 at 18:39

Kit · Accepted Answer · 2017-02-12T17:42:20.450

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

Creating checkboxes from drop-down menu

2 Answers2