JavaScript 遍历 select 个选项

Question

我正在尝试遍历 select 表单，以便在单击时增加 selected 选项的值。我已经进行了一些搜索，但没有找到我需要的东西。这是 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>

Answer 1

我为我的英语道歉。简而言之 - 该脚本仅在表单更改时才有效。也就是说，如果第一个选项被 select 编辑，然后再次 select - 计数器不会增加。

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>

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

Answer 3

您实际上不需要任何计数器。您可以使用 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中的演示

JavaScript 遍历 select 个选项

JavaScript Looping through select options

html

javascript

forms

loops

increment