jQuery动态选项以选择形式删除/添加 [英] Jquery dynamic options remove/add in select forms

问题描述

我有以下简单的HTML代码，带有2个具有相同选项值的SELECT形式:

I have following simple Html code with 2 SELECT forms with identical options values:

<select id="first">
    <option value="none">None</option>
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
</select>

<select id="second">
    <option value="none">None</option>
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
</select>

我正在编写一个jquery脚本，应执行以下操作: 如果在#first选择中，我选择除"none"以外的任何值，例如丰田，它将自动从#second选择中消失:

I am writing a jquery script that should do following: if in the #first select I choose any value except "none", f.e. Toyota, it will automatically disappear from the #second select:

<select id="second">
    <option value="none">None</option>
    <option value="two">Nissan</option>
</select>

此外，如果我在#second选择中选择了日产(假设#first仍然选择了Toyota)，它应该会自动从#first选择中消失:

further, if I choose Nissan in the #second select(assuming #first still have Toyota selected), it should automatically disappear from the #first select:

<select id="first">
    <option selected="selected" value="one">Toyota</option>
    <option value="none">None</option>
</select>

最后，当我以任何选择形式将选择器重置为无"时，它应该在同一位置的另一个选择中重新创建该选项.

At the end, when I reset selector to "None" in any select form, it should recreate that option in another select on the same position.

如何更好地实现?使用.remove()/.append()动作还是.hide()/.unhide()更好?到目前为止，我创建了以下代码段:

How is that better to achieve? is it better to use .remove()/.append() actions or .hide()/.unhide()? So far I create following snippet:

$(document).on('change','select', function() {
   var sel = $(this).attr('id');
   var val = $(this).val();

if ( sel === "first" && val != "none") {
    $("#second option[value="+val+"]").remove();
} else if ( sel === "second" && val != "none") {
    $("#first option[value="+val+"]").remove();
}

这只是从另一个选择中删除选择的选项，但是在将选择更改为无"之后如何在相同位置正确地重新创建选项?

this just removes selected option from another select, but how to correctly re-create option on the same position after changing select to "None"?

更新:.hide()函数在某些浏览器中不起作用，我需要使用.remove()/.append()，但是问题在于如何附加到该位置是以前吗?

UPDATE: .hide() function doesn't work in some browsers, I need to use .remove()/.append(), but the problem is that how to append to the position that it was before?

推荐答案

这是另一种更动态的方法来执行您想要的操作.我认为这将是最好的选择.

Here is another, more dynamic method of doing what you want. I think this one would be the best option.

http://jsfiddle.net/rK7tJ/1/

$("#first").change(function() {
    if($("#first").val() != "none") {
        $("#second option[value!="+$("#first").val()+"]").show();
        $("#second option[value="+$("#first").val()+"]").hide();
    } else {
        $("#second option[value!="+$("#first").val()+"]").show();
    }
    $("#second").val('none');
});

$("#second").change(function() {
    if($("#second").val() != "none") {
        $("#first option[value!="+$("#second").val()+"]").show();
        $("#first option[value="+$("#second").val()+"]").hide();
    } else {
        $("#first option[value!="+$("#second").val()+"]").show();
    }
    $("#first").val('none');
});

这篇关于jQuery动态选项以选择形式删除/添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！