javascript - 如何从表中获取<option>的选定值并将其存储到数组中？

var dataList=[];
$("#saveBtn").click(function(e) {
       
    var allOptionsSelected=getEditableTableOptionData("#tempTable");
    console.log(allOptionsSelected);

});
function getEditableTableOptionData(param_table) {
    var tRowList = $(param_table).find("tbody").find("tr");
      
    var dataList = [];
    for (var rIndex = 0; rIndex < tRowList.length; rIndex++) {
        var tRow = tRowList[rIndex];
      
      	var rData = {};
      	var tCellList = $(tRow).find("td");
      	for (var cIndex = 0; cIndex < tCellList.length; cIndex++) {
      		var tCell = tCellList[cIndex];
      		if ($(tCell).find("select").length)
      			rData[$(tCell).find("option").prop("value")] = $(tCell).find(
      						"option").val();
      	}
      	dataList.push(rData);
    }
    return dataList;
}

<!DOCTYPE html>
<html>
   <head>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Popper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      <title></title>
   </head>
   <body>
      <table class="table table-bordered" id="tempTable">
         <thead>
            <tr>
               <th>Type</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  <select>
                     <option value="1">भन्सार महसुल</option>
                     <option value="2">मू.अ.कर</option>
                     <option value="3">अन्त: शुल्क</option>
                     <option value="4">अन्य </option>
                  </select>
               </td>
            </tr>
            <tr>
               <td>
                  <select>
                     <option value="1">भन्सार महसुल</option>
                     <option value="2">मू.अ.कर</option>
                     <option value="3">अन्त: शुल्क</option>
                     <option value="4">अन्य </option>
                  </select>
               </td>
            </tr>
             <tr>
               <td>
                  <select>
                     <option value="1">भन्सार महसुल</option>
                     <option value="2">मू.अ.कर</option>
                     <option value="3">अन्त: शुल्क</option>
                     <option value="4">अन्य </option>
                  </select>
               </td>
            </tr>
         </tbody>
      </table>
      <button id="saveBtn" class="btn btn-primary pull-right">Save</button>
   </body>
   
</html>

我在动态表中选择了选项(我在这里只显示了三个)。当我单击“保存”按钮时，我尝试获取选项的选定值并插入数组。但是当我更改选择选项的值时并单击“保存”按钮，然后当我尝试使用 console.log(allOptionsSelected); 获取所选值时，它仅显示值“1”。

虽然我更改了这三个选项的值，但它只显示“1”。根据所选选项，它应该是 2、3 或 4。

最佳答案

find(option) 将返回它找到的第一个选项元素，因此它始终给出一个作为输出。使用 find(option:selected) 获取所选选项

var dataList = [];
$("#saveBtn").click(function(e) {

  var allOptionsSelected = getEditableTableOptionData("#tempTable");
  console.log(allOptionsSelected);
});

function getEditableTableOptionData(param_table) {
  var tRowList = $(param_table).find("tbody").find("tr");
  var dataList = [];
  for (var rIndex = 0; rIndex < tRowList.length; rIndex++) {
    var tRow = tRowList[rIndex];
    var rData = {};
    var tCellList = $(tRow).find("td");
    for (var cIndex = 0; cIndex < tCellList.length; cIndex++) {
      var tCell = tCellList[cIndex];
      if ($(tCell).find("select").length)
        rData[$(tCell).find("option").prop("value")] = $(tCell).find(
          "option:selected").val();
    }
    dataList.push(rData);
  }
  return dataList.flatMap(e=>Object.values(e));
}

<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">भन्सार महसुल</option>
            <option value="2">मू.अ.कर</option>
            <option value="3">अन्त: शुल्क</option>
            <option value="4">अन्य </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">भन्सार महसुल</option>
            <option value="2">मू.अ.कर</option>
            <option value="3">अन्त: शुल्क</option>
            <option value="4">अन्य </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">भन्सार महसुल</option>
            <option value="2">मू.अ.कर</option>
            <option value="3">अन्त: शुल्क</option>
            <option value="4">अन्य </option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
  <button id="saveBtn" class="btn btn-primary pull-right">Save</button>
</body>

</html>

关于javascript - 如何从表中获取<option>的选定值并将其存储到数组中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54996631/

javascript - 如何从表中获取<option>的选定值并将其存储到数组中？

上一篇：javascript - 如何在NetSuite上查找销售订单中的相关记录？

下一篇：JavaScript 数组表达式在一行中返回对象文字