【问题标题】:How to disable other drop down when selecting one from all drop down [closed]从所有下拉列表中选择一个时如何禁用其他下拉列表[关闭]
【发布时间】:2015-02-13 14:58:48
【问题描述】:

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

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

【问题讨论】:

  • “帮我找到正确的代码?” - 找到了吗?你现在没有吗?这在我看来确实像代码。
  • 您应该更清楚地说明您想要实现的目标。
  • 当你选择一个下拉框时如何禁用?例如我是五个下拉框,那么如果我应该选择一个禁用其他人。
  • 为什么会有php 标签?这不需要服务器端或包含任何php。您还应该更清楚您的问题,因为从阅读您的问题来看,您似乎错过了标识应该/不应该禁用哪些表的主要下拉菜单。
  • 啊.. 好吧,我正在尝试以一种我可以问我想要什么的方式提问,因为我不擅长说英语

标签: javascript html


【解决方案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>

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

【讨论】:

  • 感谢这段代码……这就是我想说的代码……非常感谢……
  • 好的.. 谢谢.. 我可以再问一个问题吗?呵呵
  • 你可以问另一个问题,前提是它不会过多地扩展你原来的问题。
  • okay2x.. 在该代码中,当我选择 Drop List1、Drop List2、Drop List3、Drop List4 或 Drop List5 时如何启用?
  • 如何将此答案标记为已回答?
猜你喜欢
  • 1970-01-01
  • 2021-05-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多