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

时间：2019-03-05 06:24:29

标签： javascript jquery html 

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。

enter image description here

3 个答案:

答案 0 :(得分：1)

x = "abcd" for i in reversed(x): print(i, end="") print("\n") L = [1,2,3] for i in reversed(L): print(i, end="") 将返回找到的第一个选项元素，因此它始终将其作为输出。使用dcba获取所选选项

321
find(option)

答案 1 :(得分：1)

您可以使用以下语句获取所有选定的选项值

var dataList=[];
$("#saveBtn").click(function(e) {       
    $("#tempTable tbody tr select option:selected").each(function(){
        dataList.push($(this).val())
    })
    console.log(dataList);
});

答案 2 :(得分：0)

获取所选选项的代码有点长。我认为可以缩短。

在click事件处理程序中，获取所有select并对其进行迭代。然后，使用val方法来获取选定的选项。

同样不在处理程序内部，清空dataList以删除先前选择的值

var dataList = [];
$("#saveBtn").click(function(e) {
  dataList.length = 0;
  $("#tempTable").find('select').each((i, v) => {
    dataList.push($(v).val())

  });
  console.log(dataList)

})
<!-- 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>

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

相关问题
最新问题