如何在for循環中訪問多個HTML select元素？

Question

這是我的HTML的要點。

<form name="formName">
<select name="mySelect" onchange="">
            <option value="value 1">option 1</option>
            <option value="value 2">option 2</option>
            <option value="value 3">option 3</option>
            <option value="value 4">option 4</option>
            <option value="value 5">option 5</option>
            <option value="value 6">option 6</option>
        </select>
</form>

此代碼在表中的32個不同的<td>被寫入32次。 我的目標是使用for循環訪問每個<select>元素，並將選擇的任何值分配給變量。 到目前為止，我還無法做到這一點。 我想看看如何在不使用jquery的情況下完成此操作，但是如果jquery是最好的方式，我會開放想法。

Answer 1

假設它們都具有.mySelect類。 如果沒有，只需向所有這些添加一個通用類。

JS解決方案

var selects = document.getElementsByClassName("mySelect");
for (i = 0; i < selects .length; i++) { 
    console.log(selects[i]);
}

jQuery解決方案

$('.mySelect').each(
    function(index, value) {
        console.log(value);
});

jQuery的每個

Answer 2

這是使用普通JavaScript選擇select元素並將值存儲在數組中的一種方法：

var selects = document.querySelectorAll('table select');
var values = Array.prototype.map.call(selects, function(sel) {
   return sel.value;
});

Answer 3

您可以將所有值添加到數組中，這是一種更好的方法。 嘗試以下

 $('button').click(function(){ var selects = []; $('select').each(function(i){ selects.push($(this).val()); }); alert(selects); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select name="mySelect" onchange=""> <option value="value 1">option 1</option> <option value="value 2">option 2</option> <option value="value 3">option 3</option> <option value="value 4">option 4</option> <option value="value 5">option 5</option> <option value="value 6">option 6</option> </select> <select name="mySelect" onchange=""> <option value="value 1">option 1</option> <option value="value 2">option 2</option> <option value="value 3">option 3</option> <option value="value 4">option 4</option> <option value="value 5">option 5</option> <option value="value 6">option 6</option> </select> <button>Run!</button> 

Answer 4

AngularJS解決方案：

// table.html
<table ng-controller="tableController">
  <tr ng-repeat="row in tableRows">
    <td ng-repeat="col in row.cols">
      <ng-include ng-src="tableElement.html">
    </td>
  </tr>
</table>

// tableElement.html
<form>
  <select ng-change="selectChanged($event, row, col)">
    <option value="value 1">option 1</option>
    <option value="value 2">option 2</option>
    <option value="value 3">option 3</option>
    <option value="value 4">option 4</option>
    <option value="value 5">option 5</option>
    <option value="value 6">option 6</option>
  </select>
</form>

// tableController.js
$scope.selectChanged = function($event, row, col){
  // update the table, send an http request, or whatever
  // not sure of the syntax here to get the changed selection:
  $values[row][col] = $event.target.value;
}
//////////////////////