Question

我有两个下拉菜单，两个都有相同的项目。如果在下拉列表1中选择了一个选项，那么我想在下拉列表2中隐藏该选项。当在下拉列表中取消选择它时，我希望它再次显示在下拉列表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;
});

感谢您的帮助！

Answer 1

如评论中所述，其中一个选项是根据第一个选择中的选择禁用/启用选项，如下所示。这适用于所有浏览器，而不是隐藏/显示，而不是。

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>

另一种选择是根据第一个通过.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();
    }
});

A Demo

Answer 2

您应该使用此插件http://gregfranko.com/jquery.selectBoxIt.js

它有一些非常好的回调和自定义选项。

当一个更改时，您可以将其放入回调中以更新另一个。

Answer 3

这是一种做法。你需要包含jQuery，然后只要值为空，就会隐藏具有相似值的选项。

＆＃13;

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
  $dropdown2.children().show();
  var selectedItem = $($dropdown1).val();
  if (selectedItem != "")
    $('select[name="dropdown2"] option[value="' + selectedItem + '"]').hide();
});
 $dropdown2.change(function() {
  $dropdown1.children().show();
  var selectedItem = $($dropdown2).val();
  if (selectedItem != "")
    $('select[name="dropdown1"] option[value="' + selectedItem + '"]').hide();
});

＆＃13;

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

＆＃13;

Answer 4

这是一种在页面加载时存储一组选项的方法，然后在进行更改时过滤备用选择。它可以在两个方向上进行选择

的更改

var $drops = $('.drop'),
// store a set of options
$options = $drops.eq(1).children().clone();

$drops.change(function(){
    var $other = $drops.not(this),
        otherVal = $other.val(),
        newVal = $(this).val(),
        $opts = $options.clone().filter(function(){
           return this.value !== newVal; 
        })
     $other.html($opts).val(otherVal);    
});

值也将保持不变，这是2方向，因此任何一个中的更改都会过滤另一个

的 DEMO

Answer 5

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
$dropdown1.change(function() {
    var selectedItem = $(this).val();
    var $options = $("select[name='dropdown1'] > option").clone();  
    $("select[name='dropdown2']").html($options);
    $("select[name='dropdown2'] > option[value="+selectedItem+"]").remove();  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

Demo

Answer 6

好吧，这段代码会在必要的选择中按值找到并删除它。

http://codepen.io/anon/pen/LVqgbO

＆＃13;

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

var populateDropdown = function(element) {
  element.find("option").remove();
  element.append("<option></option>");
  // There should be real data
  for (var i = 1; i <= 3; i++) {
    element.append("<option value='" + i + "'>Test " + i + "</option>");
  }
}

var getOptionProps = function(element) {
  var selectedValue = element.val();
  var selectedText = element.find("option[value=" + selectedValue + "]").text();
  return { text: selectedText, value: selectedValue };
}

var removeOptionWithValue = function(element, value) {
  element.find("option[value='" + value + "']").remove();
}

$dropdown1.on("change", function () {
  var selectedProps = getOptionProps($(this));
  populateDropdown($dropdown2);
  removeOptionWithValue($dropdown2, selectedProps.value);
});

$dropdown2.on("change", function () {
  var selectedProps = getOptionProps($(this));
  populateDropdown($dropdown1);
  removeOptionWithValue($dropdown1, selectedProps.value);
});

＆＃13;

在下拉列表1中选择时，从下拉列表2隐藏选项

6 个答案: