Question

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

我选择了ID＆＃39; a＆＃39;＆＃39; b＆＃39;并且＆＃39; c＆＃39;。所有这些都包含以下选项：

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

如果我现在选择了选项＆＃39; 1＆＃39;在选择列表中，我想删除选项＆＃39; 1＆＃39;来自列表＆＃39; b＆＃39;和＆＃39; c＆＃39;用JQuery。

编辑：基本上我只有http://jsfiddle.net/j91p8eo5/

有人有任何想法吗？

Answer 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()

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

Answer 3

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

jQuery：

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

jsFiddle

参考文献： .not()， .children()，:contains()，.remove()

Answer 4

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

其他选择的选定选项是设置onload，具体取决于第一个选择的默认值。

$('#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

Answer 5

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

如果在选择列表'a'中选择了选项，则如何从相同的选择列表'b'和'c'中删除选择选项？

5 个答案: