bật hoặc tắt tùy chọn từ chọn

Question

Tôi đang cố gắng thực hiện một tùy chọn có thể chọn HOẶC không thể chọn được dựa trên việc họ có chọn tùy chọn khác hay không. Ví dụ, nếu có các tùy chọn 1-6 và họ KHÔNG chọn tùy chọn 1 trong hộp chọn đầu tiên của họ, thì trong hộp chọn CÙNG đó và bất kỳ ô nào khác trong biểu mẫu, thì tùy chọn 6 KHÔNG thể được chọn.

Tôi nhìn xung quanh, nhưng mọi thứ chỉ là nhấp vào nút để đạt được điều này.

Đây là mã tôi có (Tôi cũng đã cố gắng 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

yếu tố lựa chọn không có sự kiện "onchange", nhưng chọn yếu tố nào.

Tôi đã nhanh chóng viết một đoạn mã bên dưới. Bạn có thể thêm nhiều mục được chọn. Khi bạn chọn một tùy chọn trong một trong các phần tử chọn đó, bạn không nên chọn các tùy chọn ở cùng một chỉ mục trong các phần tử chọn khác.

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