如何在从所有下拉列表中选择一个时禁用其他下拉列表

How to disable other drop down when selecting one from all drop down

本文关键字：下拉列表 一个 其他 选择      更新时间：2023-10-14

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

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

更新：一个选项可启用/禁用其他选项。

第一个选择选项的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>

我希望这能有所帮助。编码快乐！

相关文章：