Wie deaktiviere ich das zweite Dropdown-Menü, wenn in der ersten Dropdown-Liste nichts ausgewählt ist?

Question

Ich benutze den folgenden Code, aber die zweite Dropdown-Box bleibt immer im deaktivierten Zustand, nachdem das erste Dropdown-Formular ausgewählt wurde. Wie kann das zweite Dropdown-Menü für mehrere Auswahlmöglichkeiten basierend auf dem ersten Dropdown-Menü mit mehreren Auswahlmöglichkeiten deaktiviert und aktiviert werden?

<select id="multi-select-demo" multiple="multiple" style="display: none;"> 
<option value="analysis">Analysis</option> 
<option value="algebra">Linear Algebra</option> 
<option value="discrete">Discrete Mathematics</option> 
<option value="numerical">Numerical Analysis</option> 
<option value="probability">Probability Theory</option> 

<select id="multi-select-demo1" multiple="multiple" style="display: none;"> 
<option value="programming">Introduction to Programming</option> 
<option value="automata">Automata Theory</option> 
<option value="complexity">Complexity Theory</option> 
<option value="software">Software Engineering</option> 

und meine aktivieren/disablescript unter:

<script> 
$('#multi-select-demo').change(function(e){ 
$('#multi-select-demo1').prop('disabled', !$(this).val()); 

}); 
$(function(){ 
    $('#multi-select-demo').prop('disabled', true); 
    $('#multi-select-demo1').prop('disabled', true); 
}); 
</script> 

Mein Skript für Multi-Select, ich bin einfügen nicht in der Lage. Wie deaktiviere/aktiviere ich das zweite Dropdown-Menü mit mehreren Auswahlmöglichkeiten, wenn im ersten Dropdown-Menü für mehrere Auswahlmöglichkeiten nichts ausgewählt ist?

Answer 1

Der Multi-Select value ist ein Array, also überprüfen Sie die length.

$('#multi-select-demo').change(function(event) { 
    $('#multi-select-demo1').prop('disabled', !$(this).val().length); 
}); 

JSFiddle Demo: https://jsfiddle.net/842gpv77/1/

Answer 2

Sie müssen den Zustand ändern, so dass, wenn keine Optionen ausgewählt werden, ist die Auswahl deaktiviert. Der zuverlässigste Weg, dies zu tun, ist, wenn die Eigenschaft selectedIndex -1 ist.

Sie müssen auch ein Zuhörer auf die Reset-Taste, so dass, wenn das Formular zurückzusetzen, die Auswahl wieder auf Behinderte eingestellt:

window.onload = function(){ 
 
    document.getElementById('multi-select-demo').addEventListener('change',function(){ 
 
    document.getElementById('multi-select-demo1').disabled = this.selectedIndex == -1; 
 
    },false); 
 
    
 
    document.getElementById('formReset').addEventListener('click',function(){ 
 
    document.getElementById('multi-select-demo1').disabled = true; 
 
    },false); 
 
}

<form> 
 
<select id="multi-select-demo" multiple="multiple"> 
 
    <option value="analysis">Analysis</option> 
 
    <option value="algebra">Linear Algebra</option> 
 
    <option value="discrete">Discrete Mathematics</option> 
 
    <option value="numerical">Numerical Analysis</option> 
 
    <option value="probability">Probability Theory</option> 
 
</select> 
 
<select id="multi-select-demo1" multiple="multiple" disabled> 
 
    <option value="programming">Introduction to Programming</option> 
 
    <option value="automata">Automata Theory</option> 
 
    <option value="complexity">Complexity Theory</option> 
 
    <option value="software">Software Engineering</option> 
 
</select> 
 
<input id="formReset" type="reset"> 
 
</form>

Answer 3

Werfen Sie einen Blick auf bootstrap-multiselect Methods

Sie können dazu einfach die Methoden .multiselect('disable') und .multiselect('enable') verwenden.

Verwenden Sie die onChange Prop in Ihrer Multi-Select-Konfiguration und überprüfen Sie für this.$select.val(), die Ihnen ein Array der ausgewählten Werte geben wird, wenn alles natürlich ausgewählt ist. Wenn nichts ausgewählt ist, wird null zurückgegeben.

Hier ist ein Beispiel.

var $sel1 = $('#multi-select-demo'); 
 
var $sel2 = $('#multi-select-demo1'); 
 

 
$sel1.multiselect({ 
 
nonSelectedText: "Choose from Bar", 
 
    onChange: function(option, checked, select) { 
 
    if (this.$select.val() && this.$select.val().length) { 
 
    $sel2.multiselect('enable') 
 
    } else { 
 
    $sel2.multiselect('disable') 
 
    } 
 
} 
 
}); 
 

 
$sel2.multiselect({ 
 
disabledText: 'Select Bar first' 
 
});

@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"); 
 
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> 
 

 
<select id="multi-select-demo" multiple="multiple"> 
 
    <option value="analysis">Analysis</option> 
 
    <option value="algebra">Linear Algebra</option> 
 
    <option value="discrete">Discrete Mathematics</option> 
 
    <option value="numerical">Numerical Analysis</option> 
 
    <option value="probability">Probability Theory</option> 
 
</select> 
 

 
<select id="multi-select-demo1" multiple="multiple" disabled="disabled"> 
 
    <option value="programming">Introduction to Programming</option> 
 
    <option value="automata">Automata Theory</option> 
 
    <option value="complexity">Complexity Theory</option> 
 
    <option value="software">Software Engineering</option> 
 
</select>