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

Demo

Answer 2

您可以使用element.disabled。

测试用例： 在第一个选择中选择3以禁用第二个选择

＆＃13;

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();

＆＃13;

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

＆＃13;

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

参见演示here

从另一个下拉列表中选择值时，禁用整个下拉列表

3 个答案: