Füllen Multiselect-Dropdown in Abhängigkeit von auswählen

Question

Ich habe eine Auswahl Dropdown-Liste und ein Multiselect Dropdown. Und ich möchte, dass der Multiselect vom ausgewählten abhängt. Wie kann ich es tun?

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

und ich möchte, zum Beispiel, wenn eine Person wählen Sie 5. - zeigen in der Multiselect-Feld Optionen wie „Math“, „Englisch“, „Literatur“ Wenn eine Person 6. wählte - Show „Math“ "Science", "Musik" usw.

<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

Sie können diese nur mit HTML nicht erreichen. Sie müssen JavaScript verwenden, um das andere Dropdown-Element mit Elementen zu füllen, die von dem Wert abhängen, der im ersten Dropdown-Menü ausgewählt wurde. Fügen Sie dem ersten Dropdown-Menü ein onchange Ereignis hinzu. Löschen Sie innerhalb dieser Funktion alle Optionselemente des zweiten Dropdown-Menüs. Füllen Sie dann je nach ausgewähltem Wert des ersten Dropdown-Menüs das zweite aus. Hier ein Beispiel für Code, der jQuery verwendet.

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

Hier der Link jsfiddle: https://jsfiddle.net/37swkpso/

Answer 2

Zunächst einmal sollten Sie immer den Code zu Ihrer Frage hinzufügen, auch wenn es nicht funktioniert. Stackoverflow ist ein Ort zum Lernen. Wie können wir Ihnen helfen, wenn Sie Ihre Arbeit nicht teilen?

---

Array data enthält alle Ihre Daten. Wir fügen options zu beiden select s dynamisch hinzu.

Funktion init() ist, wo es beginnt. Um die Daten zu ändern, müssen wir unserem zweiten Select einen Event-Listener hinzufügen. Bitte lesen Sie meine Kommentare, um besser zu verstehen. Wenn Sie Fragen haben, zögern Sie nicht zu fragen.

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>