Создание флажков из выпадающего меню

Question

Я попытался найти рабочее решение для своей проблемы, но после нескольких дней исследований я не смог это сделать, и именно поэтому я прошу вас о помощи.

В принципе, я бы хотел, чтобы это было выпадающее меню с несколькими групповыми вариантами в нем. Так, например, в раскрывающемся меню будет 7-й год, 8-й год и т. Д. Внутри него.

Как только они выберет год 7, система создаст только один флажок. Для 8 и 9-го года должно быть создано два флажка, потому что они могут выбрать один или два предмета.

Если выпадающее меню не изменяется, флажков не должно быть.

Я надеюсь, что все это имеет смысл, и вы, ребята, сможете дать мне ответ. Спасибо заранее.

Answer 1

Что-то вроде этого, то:

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

Answer 2

Существует много ответов Google, десятки jQuery plugins и SO ответы уже заданы и разрешены. Почему это неприемлемо для вас или что вам нужно?