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

Question

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

这是我开始的一个代码笔，但我不知道从哪里开始：

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

你应该使用这个插件http://gregfranko.com/jquery.selectBoxIt.js

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

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

Answer 2

这是一种方法。您确实需要包含 jQuery，然后只要该值不为空，就可以隐藏具有相似值的选项。

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();
});

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

Answer 3

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

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

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);
});