根据选择填写多选下拉菜单

Question

我有一个选择下拉列表和一个多选下拉列表。我想多选一个依赖于选择的一个。我该怎么做？

<div class="row"> 
<div class="col" ><label>Which class: </label><select name="type_of_subject_c" id="type_of_subject_c" tabindex="1"> 
<option value="" selected="selected">--не выбрано--</option> 
<option value="5">5th </option> 
<option value="6">6th</option> 
<option value="7">7th</option> 
<option value="8">8th</option> 
</select> 
</div> 

，我想，例如，如果一个人选择了5日 - 在多选现场表演选项，如“数学”，“英语”，“文学” 如果一个人选择了6 - 显示“加减乘除” ， “科学”， “音乐” 等

<div class="row"> 
<div class="col"><label>Coruses: </label><select name="course_subj_c[]" id="course_subj_c" multiple="multiple" tabindex="1" > 
<option value="math">Math</option> 
<option value="eng>English</option> 
<option value="lit">Literature</option> 

Answer 1

你不能做到这一点只用HTML。 您需要使用JavaScript才能使用元素填充其他下拉菜单，具体取决于第一个下拉列表中选择的值。 将第一个下拉列表中的onchange事件添加到第一个下拉列表中。 在此函数中，清除第二个下拉列表中的所有选项元素。然后根据第一个下拉列表的选定值填写第二个下拉列表。这里有一个使用jQuery的代码示例。

<select name="first-dropdown" id="first-dropdown" onchange="processValue();"> 
     <option value="" selected="selected">Default Option</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 

    <select name="second-dropdown" multiple="multiple" id="second-dropdown"> 
     <option value="" selected="selected">Select option in the first dropdown</option> 
    </select> 

<script type="text/javascript"> 
    function processValue() { 
     var firstChoice = $('#first-dropdown').val(); 
     // ensure you didn't select the default option 
     if (firstChoice !== "") { 
      $('#second-dropdown').empty(); 
      switch (firstChoice) { 
       case "1": 
        $('#second-dropdown').append('<option value="first1">First 1</option>'); 
        $('#second-dropdown').append('<option value="first2">First 2</option>'); 
        break; 
       case "2": 
        $('#second-dropdown').append('<option value="second1">Second 1</option>'); 
        $('#second-dropdown').append('<option value="second2">Second 2</option>'); 
        break; 
       // ... other cases 
       default: 
        break; 
      } 
      // init jquery checkbox plugin again 
      $('#second-dropdown').multipleSelect(); 
     } 
    } 
</script> 

下面的链接的jsfiddle： 所有的https://jsfiddle.net/37swkpso/

Answer 2

首先，你应该始终代码添加到您的问题，即使它不能正常工作。 Stackoverflow是一个学习的地方，如果你不分享你的工作，我们如何帮助你。

---

Array data包含所有数据。我们动态地将options添加到selects。

功能init()是它开始的地方。要改变，我们需要一个事件侦听器添加到我们的第二个数据选择像这样

select1.addEventListener('change', function(e) ... 

这里工作的例子。请阅读我的意见以更好地理解。如果您有任何问题，请不要犹豫。

var data = [ 
 
    { subject : 'one', 
 
    selected: true, 
 
    courses: ['Math_one', 'English_one', 'Literature_one'] 
 
    }, 
 
    { subject : 'two', 
 
    courses: ['Math_two', 'English_two', 'Literature_two'] 
 
    }, 
 
    { subject : 'three', 
 
    courses: ['Math_three', 'English_three', 'Literature_three'] 
 
    }, 
 
    { subject : 'four', 
 
    courses: ['Math_four', 'English_four', 'Literature_four'] 
 
    }, 
 
    { subject : 'five', 
 
    courses: ['Math_five', 'English_five', 'Literature_five'] 
 
    }, 
 
    { subject : 'six', 
 
    courses: ['Math_six', 'English_five', 'Literature_six'] 
 
    } 
 
]; 
 

 
var select1 = document.getElementById('type_of_subject_c'); 
 
var select2 = document.getElementById('course_subj_c'); 
 
var resultText = document.getElementById('currentlySelected'); 
 

 
// Your result, do whatever you want 
 
var selectedOptions = []; 
 

 
function init(data) { 
 

 
    var subjects = []; 
 
    
 
    for (var i = 0; i < data.length; i++) { 
 
    var element = data[i]; 
 
    
 
    // Add subjects to subjects array 
 
    subjects.push(element.subject); 
 
    
 
    
 
    // We skip if current element is not selected 
 
    if (!element.selected) { 
 
     continue; 
 
    } 
 
    
 
    // If element is selected we change content of `select2` 
 
    if (element.selected) { 
 
     fillSelectOptions(select2, element.courses); 
 
    } 
 
    } 
 
    
 
    // Append all subjects as select options to `select1` 
 
    fillSelectOptions(select1, subjects); 
 
    
 
} 
 

 
// Lets add event listener `onChange` to `select` 
 
select1.addEventListener('change', function(e) { 
 
    // Based on selected/current value we will change data options of `select2` 
 
    var selectedValue = e.target.value; 
 
    
 
    // Clear result text each time we change `select1` 
 
    resultText.innerHTML = ''; 
 
    selectedOptions = []; 
 
    
 
    // Before we append new data lets clear old one 
 
    clearSelect2Options(); 
 
    
 
    // Lets find related data to selected/current value 
 
    for (var i = 0; i < data.length; i++) { 
 
    var element = data[i]; 
 
    
 
    if (element.subject === selectedValue) { 
 
     fillSelectOptions(select2, element.courses); 
 
     
 
     break; 
 
    } 
 
    } 
 

 
}); 
 

 
select2.addEventListener('change', function(e) { 
 
    var options = document.querySelectorAll('#course_subj_c option'); 
 
    
 
    resultText.innerHTML = ''; 
 
    selectedOptions = []; 
 
    
 
    for (var i = 0; i < options.length; i++) { 
 
    var option = options[i]; 
 
    if (option.selected) { 
 
     selectedOptions.push(option.value); 
 
    } 
 
    } 
 
    
 
    
 
    // Our Result is : 
 
    //console.log(selectedOptions); 
 
    // Append result to `resultText` convert array to string via `join()` 
 
    resultText.innerHTML = selectedOptions.join(); 
 

 
}); 
 

 

 

 
function fillSelectOptions(selector, dataOptions) { 
 

 
    for(var i = 0; i < dataOptions.length; i++) { 
 
     var opt = document.createElement('option'); 
 
     opt.innerHTML = dataOptions[i]; 
 
     opt.value = dataOptions[i]; 
 
     selector.appendChild(opt); 
 
    } 
 
    
 
} 
 

 
function clearSelect2Options() { 
 
    var i; 
 
    for(i = select2.options.length - 1 ; i >= 0 ; i--) { 
 
     select2.remove(i); 
 
    } 
 
} 
 

 
init(data);

favorite 
 
\t 
 

 

 
<select id="type_of_subject_c" name="type_of_subject_c"> 
 
</select> 
 

 
<select name="course_subj_c[]" id="course_subj_c" multiple="multiple" tabindex="1"> 
 
</select> 
 

 
<div>Currently selected <span id="currentlySelected"></span></div>