從另一個下拉菜單中選擇一個值時，禁用整個下拉菜單

Question

<form class="creation">
<select name="select01" class="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" class="select02" >
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

首先，兩個下拉菜單都必須處於活動狀態，當我選擇其中一個時，另一個下拉菜單將被禁用。

Answer 1

$("form select").on('change',function(){
  $("select").not(this).attr("disabled","true")
})

不嘗試jQuery

演示版

Answer 2

您可以使用element.disabled 。

測試用例： 在第一選擇中選擇3以禁用第二選擇

 function validate() { var el = document.getElementsByName("select01")[0]; document.getElementsByName("select02")[0].disabled = parseInt(el.value) > 2; } // Bind events function registerEvents(){ document.getElementsByName("select01")[0].onchange = validate; } registerEvents(); 

 <select name="select01" class="select01"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> </select> <select name="select02" class="select02"> <option value="aa">aa <disabled/option> <option value="bb">bb</option> <option value="cc">cc</option> </select> 

Answer 3

var el1=document.getElementsByName('select01')[0];
var el2=document.getElementsByName('select02')[0];
el1.onchange = function() {el2.disabled=true;};
el2.onchange = function() {el1.disabled=true;};

在這里查看演示