Question

我试图遍历选择表单，以增加每次单击时所选项的值。我已经做了一些搜索，但是没有找到我需要的东西。这是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

您从不更改选项的值，而只是更新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 2

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

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 3

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

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遍历选择选项

3 个答案: