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 Each

Answer 2

这是选择select元素并使用vanilla JavaScript将值存储在数组中的一种方法：

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

Answer 3

您可以将所有值都添加到数组中，这是更好的方法。请尝试以下

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}
//////////////////////

如何在for循环中访问多个HTML select元素？

4 个答案: