Question

我正在学习HTML和JavaScript，我想知道如何编辑我的选择列表以防止用户选择相同的内容。

下面的代码显示了其中一个列表框。第二个列表包含相同的条目，（我总共有10个列表。）通过使用纯JavaScript（不是jQuery），我想知道如何防止用户在所有10个中选择相同的条目列表框？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尽量不要使用内联事件处理程序，而是使用.addEventListener()。
在#mov1
使用#mov1确定selectedIndex选项，然后确定其值
接下来使用#mov2循环遍历for的选项。
将每次迭代的值与选定的#mov1值相匹配。
如果匹配，请使用#mov2删除.remove(i)选项

问题与此类似：https://stackoverflow.com/a/36234342/2813224

Plunker

Answer 2

每个孔页使用唯一元素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>

在JavaScript和HTML中禁用了选择列表

2 个答案: