0

クリックすると追加ボタンが1つあり、ドロップダウンが1つある新しい行が1つ生成されます（複数選択可能）。次にドロップダウンで値を選択した場合、もう一度追加ボタンを押すと、同じドロップダウンが生成されます。新しい行ですが、ユーザーが新しく作成されたドロップダウンで以前に選択されたアイテムを選択できないようにする必要があります。つまり、すべてのドロップダウンで一意の値が選択されている必要があります。

<select multiple="true" id="mySelect[0]">
  <option value="1" >Apple</option>
  <option value="2">Pear</option>
  <option value="3">Banana</option>
  <option value="4">Orange</option>
</select>
<select multiple="true" id="mySelect[1]">
  <option value="1" >Apple</option>
  <option value="2">Pear</option>
  <option value="3">Banana</option>
  <option value="4">Orange</option>
</select>
<select multiple="true" id="mySelect[2]">
  <option value="1" >Apple</option>
  <option value="2">Pear</option>
  <option value="3">Banana</option>
  <option value="4">Orange</option>
</select>

最初のドロップダウンでapple、pearが選択されている場合は、次の2つのドロップダウンでappleオプションを無効にして、赤で色付けする必要があります。

4

1 に答える 1

0

これにより、開始方法の良いアイデアが得られるはずです。

//cancels given event
function cancelEvent(ev) {
    ev.preventDefault();
    ev.returnValue = false; 
    ev.cancelBubble = true;
    return false;
}

function checkSelection(e) {
var oSel = e.target
var oPrvSel;

    for(var i=0; i<e.target.index; i++) {
        oPrvSel = document.getElementById("mySelect[" + i + "]");
        for(var j=0; j<oPrvSel.options.length; j++) {
            if (oPrvSel.options[j].text == e.target.options[e.target.selectedIndex].text) return cancelEvent(e);
        }
    }

}



//at instanciation of new elements:
var oSel = document.getElementById("mySelect[" + i + "]");
oSel.index = i;
oSel.addEventListener("keydown", checkSelection, false);
于 2012-05-30T23:51:40.573 に答える