从所有下拉菜单中选择一个时,如何禁用其他下拉菜单

时间:2015-02-13 14:58:49

标签: javascript html

如何从所有下拉列表中选择一个下拉列表时禁用其他下拉菜单。 有人可以帮我回答我的问题吗? 帮帮我,请找到正确的代码吗?

  <script>
     function disableDrop(elem) {
            if(elem.value == '2'){
                document.getElementById('row2').disabled = true;
        } else {
             document.getElementById('row2').disabled = false;        
          }
      }
       function disableDrop1(elem) {
             if(elem.value == '1'){
                 document.getElementById('row1').disabled = true;
            } else {
               document.getElementById('row1').disabled = false;        
         }
          }
     </script>

    <form ID = "frmMain">
          <select ID = "row1" onchange = "disableDrop(this);">
                <option value = "1" selected>1</option>
                    <option value = "2" selected>2</option>
             </select>

    <select ID = "row2" onchange = "disableDrop1(this);">
                <option value = "1" selected>1</option>
                <option value = "2" selected>2</option>
            </select>
       </form>

1 个答案:

答案 0 :(得分:1)

  

已更新:一个选择启用/禁用其他人。

第一个选项values必须与您要保持启用的选项的 ID 相匹配。 例如:

<option value="row1">Drop List One</option>

将保持此功能

<select id="row1" class="Drops">
   <option value = "1" selected>Drop List 1</option>
   <option value = "2" >2</option>
</select>

完整源代码:

function DropEvents(){
	var Lists=document.getElementById('Category');
		Lists.addEventListener('change', DisableMenu ,false);
}
function DisableMenu(){
		var Lists=document.getElementsByClassName('Drops');
	for(var i=0; i<Lists.length; i++){
		if(Lists[i].id!==event.target.value){
			Lists[i].disabled=true;
		}else{
      Lists[i].disabled=false;
    }
	}
}
window.onload=DropEvents;
  <select id="Category">
        <option value="row1">Drop List One</option>
        <option value="row2">Drop List Two</option>
        <option value="row3">Drop List Three</option>
        <option value="row4">Drop List Four</option>
        <option value="row5">Drop List Five</option>
  </select><hr/>
   <select id="row1" class="Drops">
           <option value = "1" >Drop List 1</option>
           <option value = "2" >2</option>
   	</select>
	<select id="row2" class="Drops" disabled="disabled">
           <option value = "1" >Drop List 2</option>
           <option value = "2" >2</option>
   </select>
   <select id="row3" class="Drops" disabled="disabled">
           <option value = "1" >Drop List 3</option>
           <option value = "2" >2</option>
   </select>
   <select id="row4" class="Drops" disabled="disabled">
           <option value = "1" >Drop List 4</option>
           <option value = "2" >2</option>
   </select>
   <select id="row5" class="Drops" disabled="disabled">
           <option value = "1">Drop List 5</option>
           <option value = "2" >2</option>
   </select>

我希望这会有所帮助。快乐的编码!