Javascript 将选项附加到原始位置

我有以下简单的HTML代码，其中包含两个具有相同选项值的SELECT表单：

没有一个 丰田 日产 本田 丰田 日产 本田 丰田 日产 本田 我正在编写一个jQuery脚本，它应该执行以下操作：如果在第一次选择中，我选择了除none以外的任何值，例如Toyota，它将自动从第二次选择中消失：

没有一个 日产 此外，如果我在第二次选择中选择日产，假设第一次选择中仍选择了丰田，它将自动从第一次选择中消失：

丰田 没有一个 最后，当我在任何选择窗体中将选择器重置为“无”时，它应该在同一位置的另一个选择中重新创建该选项

我知道如何删除和附加删除到选项列表的末尾，问题是如何将删除的选项附加到以前的位置

我将以下jscript用于删除附加选项：

$document.on'change'，'first'，函数{ fsel=$this.attr'id'； fval=$this.val； ftext=$this.children'选项：selected'.text； 如果fval==无{ $second.append+firsttext+； } 如果类型为firstval！=“未定义”&&fval！=firstval，则为else{ $second.append+firsttext+； $second选项[value=+fval+]。删除； firstval=fval； firsttext=ftext； } 否则{ firstval=fval； firsttext=ftext； $second选项[value=+fval+]。删除； } }; $document.on'change'，'second'，函数{ ssel=$this.attr'id'； sval=$this.val； stext=$this.children'选项：selected'.text； 如果sval==无{ $second.append+secondtext+； } 如果类型为secondval！=“未定义”&&sval！=secondval，则为else{ $second.append+secondtext+； $second选项[value=+sval+]。删除； secondval=sval； secondtext=stext； } 否则{ secondval=sval； secondtext=stext； $second选项[value=+sval+]。删除； } };

---

PS.请不要提供.hide/.show-它在某些浏览器中不起作用。

基本上你需要记住所有选项，我重新编写了代码，希望能有所帮助

    var sel1 = $('#first'), sel2 = $('#second');

//get the options value/text of some selection

/**
 * get the options value/text map of some select element
 * 
 * @param sel
 *            a select element
 * 
 * 
 * @return {val1:txt1, val2:txt2....}
 */
function getSelOptions(sel) {

    var opts = {}, tmp;
    for ( var i = 0, len = sel.options.length; i < len; i++) {
        tmp = sel.options[i];
        opts[tmp.value] = tmp.text;
    }

    return opts;
}

/**
 * Reset the select element's options
 * 
 * @param sel
 *            the select element
 * @param newOptions
 *            the new options map
 * @param except
 *            the option value which will be excluded
 */
function setOptionsExcept(sel, newOptions, except) {

    //remember the current select value
    var curSel = sel.options[sel.selectedIndex].value;

    //clear the select options
    sel.options.length = 0;

    for ( var k in newOptions) {

        //this one should be excludeed
        if (k != "none" && k == except)
            continue;

        //add to the option list
        sel.options.add(new Option(newOptions[k], k, false, k == curSel));
    }

}

//remember the options map
var opts1 = getSelOptions(sel1.get(0)), opts2 = getSelOptions(sel2.get(0));

sel1.change(function() {

    //sel1 value
    var val = $(this).val();

    if (val == "none") {
        //as sel1 is none, reset sel1
        setOptionsExcept(this, opts1);
    }

    //reset sel2, but no sel1 value
    setOptionsExcept(sel2.get(0), opts2, val);
});

sel2.change(function() {

    //sel2 value
    var val = $(this).val();

    if (val == "none") {
        //as sels is none, reset sel2
        setOptionsExcept(this, opts2);
    }

    //reset sel1, but no sel2 value
    setOptionsExcept(sel1.get(0), opts1, val);
});

---

您可以使用jQueryPost和一些PHP来实现这一点。首先通过在HTML中放置占位符将数据与代码分开：

<form id="formname" name="formname">
<div id="first_select"></div>
<div id="second_select"></div>
</form>

在init_first_select.php中，调用数据库并获取第一个选择框的数据，对其进行排列并返回HTML代码，如下所示：

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

在PHP文件中，处理数据并返回每个文件的HTML代码，然后将其插入第二个\u select占位符。您可以使用PHP中的所有数组操作函数来执行任何需要的操作

这同样适用于第二个选择框：

$('#second').change(function() {
    var data = $("#formname").serialize();
    $.post("update_first_select.php", data, function(response) {
        $("#first_select").html(response);
    });
});

---

当然，您可以在一个PHP文件中完成所有数据处理-

感谢到目前为止，我们更接近解决方案，但在您的代码中，我无法在不同的选择中选择丰田和日产，它会将另一个重置为->无，请自己尝试：只需更新。现在，当重新设置选项时，它将记住所选的值。今年它工作了，非常感谢，我将用更多的选择来测试它。安德鲁，很抱歉这么晚了，但是你能在代码中添加第三个选择吗？因为我自己无法正确调整。我只是添加了一些注释，希望代码更容易理解。如果sel3发生变化，sel1和sel2将如何变化？OptGroup会有点复杂，getSelOptions应该被更改，以获得不仅是key:value，而且是group:key:value。实际上，我不想使用后端，所有的工作都应该在客户端使用javascripts/jquery完成

$('#first').change(function() {
    var data = $("#formname").serialize();
    $.post("update_second_select.php", data, function(response) {
        $("#second_select").html(response);
    });
});

$('#second').change(function() {
    var data = $("#formname").serialize();
    $.post("update_first_select.php", data, function(response) {
        $("#first_select").html(response);
    });
});