JavaScript 循环选择选项答案

【问题标题】：JavaScript Looping through select optionsJavaScript 循环选择选项
【发布时间】：2018-12-01 09:33:54
【问题描述】：

我正在尝试循环选择表单以在单击时增加所选选项的值。我做了一些搜索，但我没有找到我需要的东西..这里是 html

var counter = 0;
function myFn(){
  var myOptionIndex = document.getElementById('selectForm').selectedIndex;
  var myOptionValue = document.getElementById('selectForm').value;
  var myOption = document.getElementById('selectForm').options;

  for (var i = 0; i < myOption[myOptionValue].value; i++) {
    counter++;
  }

  document.getElementById('results').innerHTML = myOption[myOptionIndex].text 
  + " has been selected " + counter + " times";
}

<form action="" id="voteForm">
    <select name="select-form" id="selectForm">
        <option value="1"> Option 1</option>
        <option value="1"> Option 2</option>
    </select>
    <button type="button" id="castVote" onclick="myFn();">Cast Your 
    Vote
   </button>        
</form>
<div id="results"></div>

【问题讨论】：

您是否尝试在每次单击时将值增加 1。
更改选择的选项值。 document.getElementById('selectForm').options[myOptionIndex].value = 'new value'

标签： javascript html forms loops increment

【解决方案1】：

您实际上不需要任何计数器。您可以使用myOptionValue 变量，因为它等于所选选项的实际值。此外，for 循环也是不必要的。您已经拥有变量myOptionIndex，它等于所选option 的索引。现在您只需要在函数中增加myOptionValue 的值并在results - div 中显示此变量而不是counter。它看起来像这样：

function myFn(){
      var myOptionIndex = document.getElementById('selectForm').selectedIndex;
      var myOptionValue = document.getElementById('selectForm').options[myOptionIndex].value;
      var myOption = document.getElementById('selectForm').options;
    myOptionValue++;
    document.getElementById('selectForm').options[myOptionIndex].value++;
      document.getElementById('results').innerHTML = myOption[myOptionIndex].text 
      + " has been selected " + myOptionValue + " times";
}

Here也是这个例子在jsfiddle中的演示。

【讨论】：

【解决方案2】：

您永远不会更改选项的值，您只是在更新counter 变量。该变量没有关于每个选项的信息。

不需要循环，只需使用选定的索引即可。

您应该将选项的初始值设置为0，因为它们都还没有收到任何投票。

var counter = 0;
function myFn(){
  var myOption = document.getElementById('selectForm').options;
  var myOptionIndex = document.getElementById('selectForm').selectedIndex;
  var myOptionValue = myOption[myOptionIndex].value;
  myOptionValue++;
  myOption[myOptionIndex].value = myOptionValue;

  document.getElementById('results').innerHTML = myOption[myOptionIndex].text 
  + " has been selected " + myOptionValue + " times";
}

<form action="" id="voteForm">
    <select name="select-form" id="selectForm">
        <option value="0"> Option 1</option>
        <option value="0"> Option 2</option>
    </select>
    <button type="button" id="castVote" onclick="myFn();">Cast Your 
    Vote
   </button>        
</form>
<div id="results"></div>

【讨论】：

【解决方案3】：

我为我的英语道歉。直截了当-脚本仅在更改表单时才起作用。也就是说，如果选择了第一个选项，然后再次选择它 - 计数器将不会增加。

let increase=()=>results.innerText=`${selectForm.options[selectForm.selectedIndex].innerText} has been selected ${selectForm.options[selectForm.selectedIndex].value++} times`;
voteForm.addEventListener('change',increase);

<form id="voteForm" action="">
  <select id="selectForm" name="select-form">
    <option value="1"> Option 1</option>
    <option value="1"> Option 2</option>
  </select>
  <button id="castVote" type="button">
    Cast Your
    Vote
  </button>
</form>
<div id="results"></div>

【讨论】：

点击按钮不会增加所选选项的投票数。仅当您更改菜单选择时才有效。
我意识到这只是一个例子，但是使用元素 ID 作为全局变量是一个非常糟糕的主意。如果您的意图是减少代码，那么 selectForm.options[selectForm.selectedIndex].innerText 可以是 selectForm.value（但具有相同的 ID/全局问题）。
@RobG 我只是利用了已有的机会。 top-starter 指向元素的 id，它会自动创建全局变量。既然他们已经是，为什么不使用。建议他使用类来更好地识别元素。