如果在选择列表“a”中选择了相同的选择列表“b”和“c”，如何从相同的选择列表中删除选择选项？ [关闭]答案

【问题标题】：How do I remove a select option from identical select lists 'b' and 'c' if it's chosen in select list 'a'? [closed]如果在选择列表“a”中选择了相同的选择列表“b”和“c”，如何从相同的选择列表中删除选择选项？ [关闭]
【发布时间】：2014-11-25 09:13:31
【问题描述】：

我知道标题不是很具描述性，但我希望我能在这里澄清我的问题：我有多个相同的选择下拉菜单。现在，我不想做的是从所有其他下拉列表中删除一个选项，如果它在其中一个中被选中。这是一个例子：

我选择了 ID 为“a”、“b”和“c”的选项。它们都包含以下选项：

<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>

如果我现在在选择列表“a”中选择选项“1”，我想使用 JQuery 从列表“b”和“c”中删除选项“1”。

编辑：这基本上就是我所拥有的：http://jsfiddle.net/j91p8eo5/

有人有什么想法吗？

【问题讨论】：

谈话很便宜。给我看代码。

标签： javascript jquery html

【解决方案1】：

假设你想删除而不是隐藏选项（因为删除元素从 dom 中完全删除）：

$("select").on("change", function() {
  //find all options with specific value(from the selected one) and remove(excluding self)
  $("select").not(this).find("option[value='" + this.value + "']").remove();
});

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

参考文献

.find()

.not()

.remove()

【讨论】：

太棒了！谢谢你的帮助，就像一个魅力:)

【解决方案2】：

那么你可以这样做

var elems = $('#a,#b,#c'); // cache the variable
elems.on('change', function(){ // attach a change handler
   elems.not(this) // remove the current element from the object
  .find('[option='+ $(this).val() +']') // find the option to be removed
  .remove(); // remove it
});

【讨论】：

【解决方案3】：

基于 Amit Joki anser 和这篇文章：jquery select change event get selected option

var elems = $('#a,#b,#c');
elems.on('change', function(e)
{
    var valueSelected = this.value;

    elems.each(function()
    {
        $(this).find('option[value='+ valueSelected +']').remove();
    });           
});

【讨论】：

【解决方案4】：

如果您只想在其他选择中隐藏当前选择的选项，您可以尝试这样的操作：

其他选择的选定选项正在加载设置，具体取决于第一个选择的默认值。

$('#b,#c').find('option[value="' + $('#a').val() + '"]').hide(); //Hide the selected on default

selectFirstOption();

$('#a').on('change', function() {
    $('#b,#c').find('option').show();
    $('#b,#c').find('option[value="' + this.value + '"]').hide();
    selectFirstOption();
});

function selectFirstOption(){
    $('#b,#c').each(function(){
        var option = $(this).find('option:visible:first').val(); //Select the first visible option
        $(this).val(option);
    });
}

Demo

【讨论】：

【解决方案5】：

您必须查看您的选择选项是否包含您在第一个选择元素中选择的字符串。然后将其从所有其他选择元素中删除，除了您从中选择的元素。而已。试试看，

jQuery :

$("#a").on("change", function(){
    $("select").not(this).children("option:contains(" + $(this).val() + ")").remove();
});

jsFiddle

参考资料： .not() , .children()，:contains()，.remove()

【讨论】：