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选择中我选择除“none”之外的任何值，f.e。丰田，它将自动从#second选择中消失：

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

此外，如果我在#second选择中选择日产（假设#first仍然选择丰田），它应该自动从#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();
}

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

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

删除选项后，您可以使用.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 3

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 4

对于N个SELECT（如秘密问题）这个怎么样。如果你有幸不得不支持IE，你可以用Hide＆amp; amp;显示为prop（'disabled'，true）和prop（'disabled'，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("");
    });
});

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

4 个答案: