在 JavaScript 和 HTML 中禁用选择列表答案

【问题标题】：Selection list disabled in JavaScript and HTML在 JavaScript 和 HTML 中禁用选择列表
【发布时间】：2016-03-27 05:50:22
【问题描述】：

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

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

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

<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>

【问题讨论】：

你的第二个名单在哪里？
@Reddy 我认为第二个列表与第一个相同，但您不能两次选择同一部电影。
请提供完整的代码 sn-p 包括你的 JavaScript 到目前为止。
@Reddy 相同的列表只是 id="mov1" 更改为 id="mov2"
您为两个选择元素添加change 的事件侦听器，当任何选择元素发生更改时，您可以禁用另一个选择框中的选定选项。

标签： javascript html

【解决方案1】：

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

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

Plunker

【讨论】：

感谢您提供的代码，但我有几个问题......所有的 mov1 和 mov2 都在 javascript 中固定，但我总共有 10 个选择（意味着 mov1 到 mov10）。如果我要全部更改，意味着我需要复制、粘贴、编辑 10 次？
您正在使用 mov1 一个带有 10 个选项的选择，而 mov2 与 mov1 相同。 mov3 到 mov10 什么时候出现问题？ Btw id 不能以数字开头。无论如何，这是另一个问题，因为我将向您展示如何以编程方式做到这一点。
我只显示 10 个选项，但我总共有 34 个选项，因为它有点太长了，所以我把它删掉了。
所以我总共有 10 个选择和 34 个选项
这将是相同的答案，生成元素是完全不同的事情，因为您不想手动进行。

【解决方案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>

【讨论】：