在下拉菜单中选择时，隐藏下拉菜单2中的选项1 [英] Hide option from dropdown 2 when selected in dropdown 1

问题描述

我有两个下拉菜单，它们都有相同的项目。如果在下拉列表1中选择了一个选项，那么我想在下拉列表中选择一个选项2.当它在下拉列表中被取消选中时1我希望它在下拉列表中再次出现2，然后选择哪个选项然后在下拉列表中隐藏2 。我试图在第一个索引中排除空白选项。

这是我开始使用的一个codepen，但我不知道该从哪里开始：

http://codepen.io/cavanflynn/ pen / EjreJK

  var $ dropdown1 = $（select [name ='dropdown1']）; 
 var $ dropdown2 = $（select [name ='dropdown2']）; 
 
 $ dropdown1.change（function（）{
 var selectedItem = $（$ dropdown1）.find（option：selected）。val; 
}）; 
  

感谢您的帮助！

解决方案

正如评论中所述，其中一个选项是根据第一个选择中的选项禁用/启用选项，如下所示。这可以在所有浏览器上运行，而不是隐藏/显示哪些不是。

  var $ dropdown1 = $（select [name =' （）; dropdown1']）; var $ dropdown2 = $（select [name ='dropdown2']）; $ dropdown1.change（function（）{$ dropdown2.find（'option'）。prop（disabled，false ）; var selectedItem = $（this）.val（）; if（selectedItem）{$ dropdown2.find（'option [value =''+ selectedItem +']'）。prop（disabled，true）;} }）;  

< script src =https：/ /ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><select name =dropdown1> <选项>< /选项> < option value =1> Test 1< / option> < option value =2>测试2< / option> < option value =3> Test 3< / option>< / select>< select name =dropdown2> <选项>< /选项> < option value =1> Test 1< / option> < option value =2>测试2< / option> < option value =3> Test 3< / option>< / select>

另一个选项是根据第一个选择通过 .clone（） ，如下所示。 > var $ dropdown1 = $（select [name ='dropdown1']）;
var $ dropdown2 = $（select [name ='dropdown2']）;

$ dropdown1.change（function（）{
$ dropdown2.empty（）。append（$ dropdown1.find（'option'）。clone（））;
var selectedItem = $（this）.val（）;
if（selectedItem）{
$ dropdown2.find（'option [value =''+ selectedItem +']'）。remove（）;
}
}）;

演示

I have two dropdowns, both have the same items in them. If an option is selected in dropdown 1 then I would like to hide that option in dropdown 2. When it is unselected in dropdown 1 I would like it to appear again in dropdown 2 and whichever option is then selected to then be hidden in dropdown 2. I am trying to have this exclude the blank option in the first index.

Here is a codepen that I started, but I am not sure where to go from here:

http://codepen.io/cavanflynn/pen/EjreJK

    var $dropdown1 = $("select[name='dropdown1']");
    var $dropdown2 = $("select[name='dropdown2']");

    $dropdown1.change(function () {
        var selectedItem = $($dropdown1).find("option:selected").val;
});

Thanks for your help!

解决方案

As said in comments, one of the options is to disable/enable options according to the selection in the first select, like below. This would work on all browsers as opposed to hide/show which doesn't.

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
    $dropdown2.find('option').prop("disabled", false);
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="dropdown2">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

Another option is to remove/add options in the 2nd dropdown based on the selection in the first via .clone(), as below.

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
    $dropdown2.empty().append($dropdown1.find('option').clone());
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown2.find('option[value="' + selectedItem + '"]').remove();
    }
});

A Demo

这篇关于在下拉菜单中选择时，隐藏下拉菜单2中的选项1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！