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

Question

我有以下简单的Html代码，其中包含两个具有相同选项值的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脚本，它应该执行以下操作：如果在第一次选择中，我选择了除"无"以外的任何值，例如丰田，它将自动从第二次选择中消失：

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

此外，如果我在第二次选择中选择日产（假设第一次仍然选择丰田），它应该会自动从第一次选择中消失：

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

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

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

Answer 2

jsFiddle

只要你有办法把选择组合在一起，这就会奏效。在这种情况下，我只是使用了一个类。此外，还有一种比硬编码更好的方法来设置每个选择的起点。将prefText设置为：jQuery(".onlySelectOnce:first").html()可能会起作用。

var prefArr = ["one", "two", "three"];
var prefText = ['<option value="">None</option>',
'<option value="one">Toyota</option>',
'<option value="two">Nissan</option>',
'<option value="three">Dodge</option>'];
jQuery('#content').on("change","select[name^=pref]",function(){
        var selectedPrefs = [];
        //What items are selected
        jQuery("select[name^=pref]").each(function(){
            selectedPrefs.push(jQuery(this).val());
        });
        //make sure to add selection back to other selects
        jQuery("select[name^=pref]").each(function(i,select){
            jQuery(select).empty();
            jQuery(select).append(prefText);
            var elZero = selectedPrefs[i];
            jQuery(select).val(elZero);
            console.log(jQuery(select).prop("name")+" "+i+" "+elZero);
        });
        //remove already selected options
        jQuery("select[name^=pref]").each(function(i,select){
            jQuery("select[name^=pref] option").each(function(ii,option){
                if(jQuery(option).val() != "" && selectedPrefs[i] == jQuery(option).val() && selectedPrefs[i] != jQuery(option).parent().val()){
                    jQuery(option).remove();
                }
            });
        });
    });

Answer 3

删除一个选项后，您可以使用.append:添加一个选项

$('#selectID').append($("<option></option>").attr("value","SomeVal").text("SomeText"));

编辑：我想这就是你想要做的，对吗？http://jsfiddle.net/zdZ3d/

$("#first").change(function() {
switch($("#first").val()) {
    case "one":
        $("#second option[value='one']").hide();
        $("#second option[value!='one']").show();
        $("#second").val("none");
        break;
    case "two":
        $("#second option[value='two']").hide();
        $("#second option[value!='two']").show();
        $("#second").val("none");
        break;
    case "none":
        $("#second option[value='one']").show();
        $("#second option[value!='two']").show();
        $("#second").val("none");
        break;
}
});
$("#second").change(function() {
switch($("#second").val()) {
    case "one":
        $("#first option[value='one']").hide();
        $("#first option[value!='one']").show();
        $("#first").val("none");
        break;
    case "two":
        $("#first option[value='two']").hide();
        $("#first option[value!='two']").show();
        $("#first").val("none");
        break;
    case "none":
        $("#first option[value='one']").show();
        $("#first option[value!='two']").show();
        $("#first").val("none");
        break;
}
});

Answer 4

对于N个SELECT（对于机密问题），这怎么样。如果你足够幸运，没有陷入必须支持IE的困境，你可以用Hide&显示道具（"禁用"，true）和道具（"已禁用"，false）。希望我能。

var lastQuestion;
$("select").bind('click keyup', function (event) {
    lastQuestion = $(event.srcElement).val();
});
$("select").bind('change', function (event) {
    $("select").not(event.srcElement).each(function (index) {
        if(lastQuestion != '')
            $("#" + this.id + " option[value='" + lastQuestion + "']").prop('disabled', false);
        if ($(event.srcElement).val() != "") {
            $("#" + this.id + " option[value='" + $(event.srcElement).val() + "']").prop('disabled', true);
        }
        //$("#" + this.id).val("");
    });
});