JavaScriptとHTMLで選択リストが無効にされています

私はHTMLとJavaScriptを学習しています。選択リストを編集してユーザーが同じものを選択できないようにする方法を知りたいと思います。JavaScriptとHTMLで選択リストが無効にされています

以下のコードは、リストボックスの1つを示しています。 2番目のリストには同じエントリが含まれています（合計10個のリストがあります）。純粋なJavaScript（jQueryではなく）を使用して、10個のリストボックスすべてで同じエントリを選択しないようにする方法を知りたい？

function display(choice,row) 
 
\t { \t 
 
\t \t var total = 0; \t 
 
\t \t document.getElementById("price" + row).value = choice; 
 
    }

<select id="mov1" name="mov1" onchange="display(this.value,1)" > 
 
    \t <option value="" disabled="disabled" selected="selected">Select a movie</option> 
 
    \t <option id="1" value="4.99">17 Again (2009)</option> 
 
    \t <option id="2" value="13.20">Avatar The Last Airbender (2010)</option> 
 
    \t <option id="3" value="0.70">Batman Begins (2005)</option> 
 
    \t <option id="4" value="14.25">Deadpool (2016)</option> 
 
    \t <option id="5" value="1.08">Elysium (2013)</option> 
 
    \t <option id="6" value="10.11">Fast And Furious 7 (2015)</option> 
 
    \t <option id="7" value="4.89">Fifty Shades Of Grey (2015)</option> 
 
    \t <option id="8" value="6.99">Goosebumps (2015)</option> 
 
    \t <option id="9" value="10.95">Harry Potter And The Deathly Hallows Part 2 (2011)</option> 
 
    \t <option id="10" value="2.45">I Am Number 4 (2011)</option> 
 
    \t <option id="11" value="0.89">Jack And The Giant Slayer (2013)</option> 
 
    \t <option id="12" value="5.39">Kingsman The Secret Service (2014)</option> 
 
    \t <option id="13" value="0.71">Lord Of The Rings (2001)</option> 
 
    \t <option id="14" value="6.50">Maleficent (2014)</option> 
 
    \t <option id="15" value="0.72">Mean Girls (2004)</option> 
 
    \t <option id="16" value="6.40">Minions (2015)</option> 
 
    \t <option id="17" value="9.90">Mission Impossible Rogue Nation (2015)</option> 
 
    \t <option id="18" value="6.39">Now You See Me (2013)</option> 
 
    \t <option id="19" value="2.40">Oz The Great And Powerful (2013)</option> 
 
    \t <option id="20" value="5.00">Percy Jackson And The Lightning Thief (2010)</option> 
 
    \t <option id="21" value="8.09">Pirates Of the Caribbean On The Stranger Tides (2011)</option> 
 
    \t <option id="22" value="9.46">Quantum Of Solace (2008)</option> 
 
    \t <option id="23" value="4.23">Rise Of The Guardians (2012)</option> 
 
    \t <option id="24" value="0.73">Shrek The Third (2007)</option> 
 
    \t <option id="25" value="4.61">Snow White And The Huntsman (2011)</option> 
 
    \t <option id="26" value="4.33">Spring Breakers (2012)</option> 
 
    \t <option id="27" value="0.74">The Hunger Games (2012)</option> 
 
    \t <option id="28" value="0.75">The Sisterhood Of The Traveling Pants (2005)</option> 
 
    \t <option id="29" value="1.06">Ultraviolet (2006)</option> 
 
    \t <option id="30" value="1.83">Vampire Academy (2014)</option> 
 
    \t <option id="31" value="2.77">World War Z (2013)</option> 
 
    \t <option id="32" value="0.76">X-Men Origins Wolverine (2009)</option> 
 
    \t <option id="33" value="1.99">Yogi Bear (2010)</option> 
 
    </select> 
 
<input type="text" style="text-align:center" name="price1" id="price1" readonly="readonly" size=8>

出典

2016-03-27 Zorev Gnoz

2番目のリストはありますか？ –

@Reddy 2番目のリストは最初のリストと同じだと思うが、同じ映画を2回選ぶことはできない。 –

これまでのJavaScriptを含む完全なコードスニペットをご提供ください。 –

インラインイベントハンドラを使用しないようにしてください、代わりに.addEventListener()を使用しています。
それは次にforループと#mov2のオプションを反復値
だ決定selectedIndexと#mov1選択を決定#mov1
に変更イベントを検出します。
各反復の値を#mov1の選択値と一致させます。
一致がある場合、.remove(i)

で#mov2のオプションを削除する質問はこの1つのまねです：https://stackoverflow.com/a/36234342/2813224

Plunker

出典

2016-03-27 06:09:12 zer00ne

あなたが提供してくれたコードをありがとう、しかし、私はいくつかの質問を持って...すべてのmov1とmov2は、JavaScriptがそこに固定されているが、私は10選択（mov10までmov10を意味する）合計があります。私がそれらのすべてを変更したいのであれば、コピー、貼り付け、編集を10回必要としますか？ –

mov1には10個のオプションを含むselectとmov1と同じmov2が使用されています。 mov3からmov10まではいつ質問になりましたか？ Btw IDは数字で始めることはできません。とにかく、これは別の質問です。なぜなら、プログラムでそれを行う方法を示しているからです。 – zer00ne

私は10オプションを表示するだけですが、合計34個のオプションがあるため、長すぎます。 –

使用ユニークな要素ID 穴ページあたり。 IDの数はあまり表現力がありません。 value属性は、選択されたものをサーバーに通知する必要があります。さらにデータをdata-...属性に配置することも、配列に保持することもできます。

はJavaScript

var prices = 
[ 1.99, 
    2.99, 
    3.99, 
    3.99, 
    2.99, 
    1.99, 
    3.49, 
    3.49, 
    1.99, 
    1.99 
]; 

function onChange(event) 
{ 
    if(/^mov\d+$/.test(event.target.id)) 
    { 
    var itemsToDisable = document.querySelectorAll('.mov-list:not(#' + event.target.id + ')>option[value="'+ event.target.value +'"]'); 

    if(event.target.disabledItems) 
     for(var i=0 ; i<event.target.disabledItems.length ; i++) 
     event.target.disabledItems[i].disabled = false; 

    for(var i=0 ; i<itemsToDisable.length ; i++) 
     itemsToDisable[i].disabled = true; 

    event.target.disabledItems = itemsToDisable; 

    console.log(prices[event.target.value]); 
    } 
} 

document.addEventListener('change', onChange);

HTML

<div> 
    <select id="mov0" class="mov-list" name="mov1"> 
    <option value="" disabled="disabled" selected="selected">Select a movie</option> 
    <option value="0" data-price="1.99">17 Again (2009)</option> 
    <option value="1">Avatar The Last Airbender (2010)</option> 
    <option value="2">Batman Begins (2005)</option> 
    <option value="3">Deadpool (2016)</option> 
    <option value="4">Elysium (2013)</option> 
    <option value="5">Fast And Furious 7 (2015)</option> 
    <option value="6">Fifty Shades Of Grey (2015)</option> 
    <option value="7">Goosebumps (2015)</option> 
    <option value="8">Harry Potter And The Deathly Hallows Part 2 (2011)</option> 
    <option value="9">I Am Number 4 (2011)</option> 
    </select> 
    <select id="mov1" class="mov-list" name="mov2"> 
    <option value="" disabled="disabled" selected="selected">Select a movie</option> 
    <option value="0">17 Again (2009)</option> 
    <option value="1">Avatar The Last Airbender (2010)</option> 
    <option value="2">Batman Begins (2005)</option> 
    <option value="3">Deadpool (2016)</option> 
    <option value="4">Elysium (2013)</option> 
    <option value="5">Fast And Furious 7 (2015)</option> 
    <option value="6">Fifty Shades Of Grey (2015)</option> 
    <option value="7">Goosebumps (2015)</option> 
    <option value="8">Harry Potter And The Deathly Hallows Part 2 (2011)</option> 
    <option value="9">I Am Number 4 (2011)</option> 
    </select> 
    <select id="mov2" class="mov-list" name="mov2"> 
    <option value="" disabled="disabled" selected="selected">Select a movie</option> 
    <option value="0">17 Again (2009)</option> 
    <option value="1">Avatar The Last Airbender (2010)</option> 
    <option value="2">Batman Begins (2005)</option> 
    <option value="3">Deadpool (2016)</option> 
    <option value="4">Elysium (2013)</option> 
    <option value="5">Fast And Furious 7 (2015)</option> 
    <option value="6">Fifty Shades Of Grey (2015)</option> 
    <option value="7">Goosebumps (2015)</option> 
    <option value="8">Harry Potter And The Deathly Hallows Part 2 (2011)</option> 
    <option value="9">I Am Number 4 (2011)</option> 
    </select> 
</div> 
<script type="text/javascript"> 
    // ... 
</script>

出典

2016-03-27 08:48:01

JavaScriptとHTMLで選択リストが無効にされています

答えて

関連する問題