根據選擇填寫多選下拉菜單

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>