使用jQuery來操縱從選擇刪除項目

Question

我正在嘗試使用jquery從select中刪除一個選項，

就我而言，我有4個以上的選擇項（在某些情況下為10個選擇項），我必須實現的方案是：

如果用戶從第一個選項中選擇“豐田”，則豐田將從其他三個選項中刪除

然后，如果他從第二個選擇中選擇了日產，那么日產也會從其他三個選擇中刪除，即使是第一個，直到最后一個選擇將僅顯示一個選項

我已經嘗試了下面的示例，但無法正常使用http://jsfiddle.net/rooseve/PGqv7/3/請幫助我是jquery的初學者

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title>Document sans titre</title>

<script type="text/javascript">
$( function(){
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);
});

            }
</script>

</head>

<body>


<table>
          <tr>
            <td><select id="first" required>
                <option value="">choisir</option>
                <option value="Profconf">Professeur de Conférence</option>
                <option value="ProfEnsgSup">Professeur d'enseignement supérieur</option>
                 <option value="ProfAssistant">Professeur Assistant</option>
                  <option value="ProfAdjoint">Professeur Adjoint</option>
              </select>
              <input type="hidden" name="designationtypecadre1" value="Professeur_checheurEquivalent "/>
            </td>
          </tr>
          <tr>
            <td><select id="second" >
                <option value="">choisir</option>
                <option value="Profconf">Professeur de Conférence</option>
                <option value="ProfEnsgSup">Professeur d'enseignement supérieur</option>
                 <option value="ProfAssistant">Professeur Assistant</option>
                  <option value="ProfAdjoint">Professeur Adjoint</option>
            </select>
            <input type="hidden" name="designationtypecadre2" value="Professeur_checheurEquivalent"/>
            </td>
          </tr>
          <tr>
            <td><select id="third" >
                <option value="">choisir</option>
                <option value="Profconf">Professeur de Conférence</option>
                <option value="ProfEnsgSup">Professeur d'enseignement supérieur</option>
                 <option value="ProfAssistant">Professeur Assistant</option>
                  <option value="ProfAdjoint">Professeur Adjoint</option>
            </select>
            <input type="hidden" name="designationtypecadre3" value="Professeur_checheurEquivalent"/>
            </td>
          </tr>
      </table> </body>
</html>

Answer 1

如果用戶從第一個選項中選擇“豐田”，則豐田將從其他三個選項中刪除

試試這個，演示

$( '#first, #second, #third, #fourth' ).change(function(){
   //get the selected text
   var selectedText = $(this).find(":selected").html();
   $( '#first, #second, #third, #fourth' ).not($(this)).each( function(){
     $(this).find("option").each( function(){
        if ( $(this).html() == selectedText )
        {
          $(this).remove();
        }
     });
   } );
});

Answer 2

下面將使用“ choisir”選項以及其他選擇中未選擇的所有選項填充每個選擇。 因為基本都是開始選項，所以在另一個文本框中選擇另一個選項將重新附加原始選項

var selects = $('select'), // or $('#first, #second, #third'), but better would be to use a class
  alloptions = $('#first').children().clone();   

selects.change(function(){  
    var values= selects.map((i,s) => $(s).val()).get();
    selects.not(this).each((si,s)=>{
    var cur = $(s).val();
    $(s).empty()
        .append(alloptions
        .filter((oi, o)=> oi === 0 || o.value === cur || values.indexOf(o.value) === -1).clone())
      .val(cur);
  });
});

小提琴

在change事件中，使用var values= selects.map((i,s) => $(s).val()).get();獲得具有所有值的數組var values= selects.map((i,s) => $(s).val()).get(); 然后，除觸發變更事件的Select之外的每個Select都將用確認過濾器oi === 0 || o.value === cur || values.indexOf(o.value) === -1所有選項重新填充oi === 0 || o.value === cur || values.indexOf(o.value) === -1 oi === 0 || o.value === cur || values.indexOf(o.value) === -1 oi === 0 || o.value === cur || values.indexOf(o.value) === -1 ，其中oi是選項索引，o.value是選項值。 換句話說：始終包括索引0（choisir），select的當前值以及所有不在緩沖values數組內的values

PS，如果可以在運行時填充選擇，則只需填充第一個選擇，而其他選擇可以用相同的選項填充，如本小提琴所示。

使用jQuery來操縱從選擇刪除項目

問題描述

2 個解決方案

解決方案1
0 2016-03-10 11:28:52

解決方案2
0 2016-03-10 17:17:31

使用jQuery來操縱從選擇刪除項目

問題描述

2 個解決方案

解決方案1 0 2016-03-10 11:28:52

解決方案2 0 2016-03-10 17:17:31

解決方案1
0 2016-03-10 11:28:52

解決方案2
0 2016-03-10 17:17:31