Aktivieren oder Deaktivieren der Option von wählen

Question

Ich versuche, eine Option entweder wählbar oder nicht auswählbar je nachdem, ob sie eine andere Option gewählt haben oder nicht. Wenn zum Beispiel die Optionen 1 bis 6 vorhanden sind und sie NICHT die Option 1 in ihrem ersten Auswahlfeld gewählt haben, dann könnte in diesem Auswahlfeld SAME und jedem anderen im Formular die Option 6 NICHT gewählt werden.

Ich schaute mich um, aber alles dreht sich darum, einen Knopf zu klicken, um dies zu erreichen.

Dies ist der Code Ich habe (ich habe auch versucht Onclick)

<script type="text/javascript"> 
     function makeDisable(){ 
     var x=document.getElementById("mySelect2"); 
     x.disabled=true 
     } 
    function makeEnable(){ 
     var x=document.getElementById("mySelect2"); 
      x.disabled=false 
    }</script> 
    <form> 
     <select class="mySelect" id="mySelect"> 
     <option onchange="makeEnable()" value="Enable list">Apple</option> 
     <option onchange="makeDisable()" value="Disable list">Banana</option> 
     <option id="mySelect2" disabled="true">Orange</option> 
    </select> 
    </form> 

Answer 1

Option Elemente keine Veranstaltung "onchange", sondern wählen Elemente tun.

Ich habe schnell ein Code-Snippet unten geschrieben. Sie können weitere ausgewählte Elemente hinzufügen. Wenn Sie eine Option in einem dieser Auswahlelemente auswählen, sollten Sie in anderen Auswahlelementen keine Optionen mit demselben Index auswählen.

<script type="text/javascript"> 
    function toggleDisability(selectElement){ 
    //Getting all select elements 
    var arraySelects = document.getElementsByClassName('mySelect'); 
    //Getting selected index 
    var selectedOption = selectElement.selectedIndex; 
    //Disabling options at same index in other select elements 
    for(var i=0; i<arraySelects.length; i++) { 
    if(arraySelects[i] == selectElement) 
    continue; //Passing the selected Select Element 

    arraySelects[i].options[selectedOption].disabled = true; 
    } 
    } 
</script> 
<form> 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1"> 
    <option>Apple</option> 
    <option>Banana</option> 
    <option>Orange</option> 
</select> 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2"> 
    <option>Hamburger</option> 
    <option>Pizza</option> 
    <option>Cola</option> 
</select> 
</form> 

Answer 2

<script type="text/javascript"> 
 
    function toggleDisability(selectElement){ 
 
    //Getting all select elements 
 
    var arraySelects = document.getElementsByClassName('mySelect'); 
 
    //Getting selected index 
 
    var selectedOption = selectElement.selectedIndex; 
 
    //Disabling options at same index in other select elements 
 
    for(var i=0; i<selectElement.length; i++) { 
 
    if(arraySelects[i] == selectedOption) 
 
    continue; //Passing the selected Select Element 
 

 
    arraySelects[i].options[selectedOption].disabled = true; 
 
    } 
 
    } 
 
</script> 
 
<form> 
 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1"> 
 
    <option>Apple</option> 
 
    <option>Banana</option> 
 
    <option>Orange</option> 
 
</select> 
 
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2"> 
 
    <option>Hamburger</option> 
 
    <option>Pizza</option> 
 
    <option>Cola</option> 
 
</select> 
 
</form>