jQuery .append选项到原始位置 [英] jQuery .append option to original position

问题描述

我有以下带有2个SELECT形式的简单HTML代码，这些形式具有相同的选项值:

I have following simple HTML code with 2 SELECT forms with identical options values:

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

I am writing a jQuery script that should do following: if in the #first select I choose any value except "none", f.e. Toyota, it will automatically disappear from the #second select:

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

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

further, if I choose Nissan in the #second select(assuming #first still have Toyota selected), it should automatically disappear from the #first select:

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

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

At the end, when I reset selector to "None" in any select form, it should recreate that option in another select on the same position.

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

I know how to remove and append removed to the end of options list, the question is how to append removed option to the position that it was before?

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

I am using following jscript for remove append options:

$(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-在某些浏览器中不起作用.

PS. Please don't offer .hide/.show - it doesn't work in some browsers.

推荐答案

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

Basically you need to remember all the options, I re-write the code, hope it can be helpful.

    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/

这篇关于jQuery .append选项到原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！