Question

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

<select id="first">
    <option value="none">None</option>
  <optgroup label="Main">
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
   </optgroup>
   <optgroup label="Other">
    <option value="tre">Honda</option>
   </optgroup>
</select>

<select id="second">
  <optgroup label="Main">
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
   </optgroup>
   <optgroup label="Other">
    <option value="tre">Honda</option>
   </optgroup>
</select>

<select id="third">
  <optgroup label="Main">
    <option value="one">Toyota</option>
    <option value="two">Nissan</option>
   </optgroup>
   <optgroup label="Other">
    <option value="tre">Honda</option>
   </optgroup>
</select>

我正在编写一个应该执行以下操作的jQuery脚本：如果在#first select中我选择除“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>

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

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

我正在使用以下jscript删除附加选项：

$(document).on('change','#first',   function() {
    fsel = $(this).attr('id');
    fval = $(this).val();
    ftext = $(this).children('option:selected').text();

    if (fval === "none" ) {
            $("#second").append('<option value="'+ firstval +'">'+firsttext+'</option>');
          }
    else if ( typeof firstval != 'undefined' && fval != firstval) {
            $("#second").append('<option value="'+ firstval +'">'+firsttext+'</option>');
            $("#second option[value="+fval+"]").remove();
            firstval = fval;
            firsttext = ftext;
    }
    else {
            firstval = fval;
            firsttext = ftext;
            $("#second option[value="+fval+"]").remove();
          }
});

$(document).on('change','#second',   function() {
    ssel = $(this).attr('id');
    sval = $(this).val();
    stext = $(this).children('option:selected').text();
    if (sval === "none" ) {
            $("#second").append('<option value="'+ secondval +'">'+secondtext+'</option>');
     }
    else if ( typeof secondval != 'undefined' && sval != secondval) {
            $("#second").append('<option value="'+ secondval +'">'+secondtext+'</option>');
            $("#second option[value="+sval+"]").remove();
            secondval = sval;
            secondtext = stext;
    }
    else {
            secondval = sval;
            secondtext = stext;
            $("#second option[value="+sval+"]").remove();
         }
});

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

Answer 1

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

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

http://jsfiddle.net/rooseve/PGqv7/3/

Answer 2

你可以使用jQuery post（）和一些PHP来做到这一点。首先将占位符放在HTML中，从代码中分离数据：

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

文档准备就绪后的第一件事：初始化占位符

$(document).ready(function() {
    $.get("init_first_select.php", function(response) {
        $("#first_select").html(response);
    });

    $.get("init_second_select.php", function(response) {
        $("#second_select").html(response);
    });
});

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

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

然后使用change（）和post（）来响应用户选择：

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

在PHP文件中，您处理数据并为每个数据返回HTML-Code，然后将其插入#second_select占位符。您可以使用PHP中的所有数组操作函数来执行您需要的任何操作。

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

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

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

jQuery .append选项到原始位置

2 个答案: