Jquery 动态选项在选择表单中删除/添加

Question

我有以下简单的 Html 代码，其中包含 2 个具有相同选项值的 SELECT 表单:

<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 select中我选择除“none”之外的任何值，例如丰田，它会自动从#second select中消失:

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

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

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

最后，当我在任何选择表单中将选择器重置为“无”时，它应该在同一位置的另一个选择中重新创建该选项。

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

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

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

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

Answer 1

这是另一种更动态的方法来完成您想要的事情。我认为这将是最好的选择。

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