防止在三个不同的下拉列表中选择相同的值 [英] Prevent selecting same value in three different dropdowns

查看：127 发布时间：2017/7/18 0:24:05 javascript html drop-down-menu

本文介绍了防止在三个不同的下拉列表中选择相同的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有三个下拉列表。我想要的是当用户从下拉列表1中选择任何项目时，应该在下拉列表2和3中禁用该项目。另外，如果在下拉列表2中选择了一个项目，则两个选定的项目都必须从下拉菜单3禁用。

这是我使用的代码：

 <！DOCTYPE html> 
< html> 
< head> 
< script> 
 function updateSelect（changedSelect，selectId）{
 var otherSelect = document.getElementById（selectId）; 
 for（var i = 0; i< otherSelect.options.length; ++ i）{
 otherSelect.options [i] .disabled = false; 
} 
 if（changedSelect.selectedIndex == 0）{
 return; 
} 
 otherSelect.options [changedSelect.selectedIndex] .disabled = true; 
} 
< / script> 
< / head> 
< body> 
< select id =select_1onchange =updateSelect（this，'select_2'），updateSelect（this，'select_3'）; NAME = indication_subject [] > 
< option value =selected =selected> a< / option> 
< option value =1>会计与LT; /选项> 
< option value =2>南非荷兰语< /选项> 
< option value =3>应用信息与通信技术< / option> 
< option value =4>阿拉伯< /选项> 
< option value =5>艺术与设计< / option> 
< option value =6>生物学和LT; /选项> 
< option value =7>商业研究< / option> 
< / select> 
< select id =select_2name =indication_subject []onchange =updateSelect（this，'select_1'，'select_3'）; > 
< option value =selected =selected> a< / option> 
< option value =1>会计与LT; /选项> 
< option value =2>南非荷兰语< /选项> 
< option value =3>应用信息与通信技术< / option> 
< option value =4>阿拉伯< /选项> 
< option value =5>艺术与设计< / option> 
< option value =6>生物学和LT; /选项> 
< option value =7>商业研究< / option> 
< / select> 
< select id =select_3name =indication_subject []onchange =updateSelect（this，'select_1'，'select_2'）; > 
< option value =selected =selected> a< / option> 
< option value =1>会计与LT; /选项> 
< option value =2>南非荷兰语< /选项> 
< option value =3>应用信息与通信技术< / option> 
< option value =4>阿拉伯< /选项> 
< option value =5>艺术与设计< / option> 
< option value =6>生物学和LT; /选项> 
< option value =7>商业研究< / option> 
< / select> 
< / body> 
< / html>

以下是JSFiddle链接，适用于两个下拉菜单，而不是三个。如何添加第三个下拉列表？

http ：//jsfiddle.net/x4E5Q/1/

解决方案

尝试这个：

HTML

 < select id =select1name = indication_subject [] > 
< option value =selected =selected> a< / option> 
< option value =1>会计与LT; /选项> 
< option value =2>南非荷兰语< /选项> 
< option value =3>应用信息与通信技术< / option> 
< option value =4>阿拉伯< /选项> 
< option value =5>艺术与设计< / option> 
< option value =6>生物学和LT; /选项> 
< option value =7>商业研究< / option> 
< / select> 
 
< select id =select2name =indication_subject []> 
< option value =selected =selected> a< / option> 
< option value =1>会计与LT; /选项> 
< option value =2>南非荷兰语< /选项> 
< option value =3>应用信息与通信技术< / option> 
< option value =4>阿拉伯< /选项> 
< option value =5>艺术与设计< / option> 
< option value =6>生物学和LT; /选项> 
< option value =7>商业研究< / option> 
< / select> 
 
< select id =select3name =indication_subject []> 
< option value =selected =selected> a< / option> 
< option value =1>会计与LT; /选项> 
< option value =2>南非荷兰语< /选项> 
< option value =3>应用信息与通信技术< / option> 
< option value =4>阿拉伯< /选项> 
< option value =5>艺术与设计< / option> 
< option value =6>生物学和LT; /选项> 
< option value =7>商业研究< / option> 
< / select>

  $（document）.ready（function（）{
 $（select）。change（function（）{
 $（select）。不是（这个）.find（option [value =+ $（this）.val（）+]）attr（'disabled'，true）; 
}）; 
}） ;

演示

I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown 2, then both selected items must be disabled from dropdown 3.

Here is the code I am using:

<!DOCTYPE html>
<html>
<head>
  <script>
    function updateSelect(changedSelect, selectId) {
      var otherSelect = document.getElementById(selectId);
      for (var i = 0; i < otherSelect.options.length; ++i) {
        otherSelect.options[i].disabled = false;
      }
      if (changedSelect.selectedIndex == 0) {
        return;
      }
      otherSelect.options[changedSelect.selectedIndex].disabled = true;
    }
  </script>
</head>
<body>
  <select id="select_1"  onchange="updateSelect(this,'select_2'),updateSelect(this,'select_3');"   name="indication_subject[]">
    <option value="" selected="selected">a </option>
    <option value="1"> Accounting</option>
    <option value="2"> Afrikaans</option>
    <option value="3"> Applied Information and Communication Technology</option>
    <option value="4"> Arabic</option>
    <option value="5"> Art and Design</option>
    <option value="6"> Biology</option>
    <option value="7"> Business Studies</option>
  </select>
  <select id="select_2" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_3');" >
    <option value="" selected="selected">a </option>
    <option value="1"> Accounting</option>
    <option value="2"> Afrikaans</option>
    <option value="3"> Applied Information and Communication Technology</option>
    <option value="4"> Arabic</option>
    <option value="5"> Art and Design</option>
    <option value="6"> Biology</option>
    <option value="7"> Business Studies</option>
  </select>
  <select id="select_3" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_2');" >
    <option value="" selected="selected">a </option>
   <option value="1"> Accounting</option>
   <option value="2"> Afrikaans</option>
   <option value="3"> Applied Information and Communication Technology</option>
   <option value="4"> Arabic</option>
   <option value="5"> Art and Design</option>
   <option value="6"> Biology</option>
   <option value="7"> Business Studies</option>
  </select>
</body>
</html>

Below is the JSFiddle link which works for two dropdowns, not three. How can I add a third dropdown for this?

http://jsfiddle.net/x4E5Q/1/

解决方案

Try This:

HTML

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select3" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
});

Demo

这篇关于防止在三个不同的下拉列表中选择相同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

防止在三个不同的下拉列表中选择相同的值 [英] Prevent selecting same value in three different dropdowns

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

防止在三个不同的下拉列表中选择相同的值 [英] Prevent selecting same value in three different dropdowns

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭