时间戳

首页 > 解决方案 > 如何获取 2 个不同行但 ID 相同的选定选项的值

javascript - 如何获取 2 个不同行但 ID 相同的选定选项的值

问题描述

我的表在每个循环中，其 id 设置为id="batchNo".

我想获取每一行select option选定值的值。

我尝试使用以下代码，但它返回第 1 行选定的值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<table>
  <tr>
    <td>
      <select id="batchNo">
        <option value="341" selected>this is 341</option>
        <option value="53">this is 53</option>
      </select>
    </td>
    <td><input type="text" onfocusout="return alert($('#batchNo').find(':selected').text())"></td>
  </tr>
  <tr>
    <td>
      <select id="batchNo">
        <option value="341">this is 341</option>
        <option value="53" selected>this is 53</option>
      </select>
    </td>
    <td><input type="text" onfocusout="return alert($('#batchNo').find(':selected').text())"></td>
  </tr>
</table>

在第二排的焦点上，它应该返回this is 53，但它给出了this is 341

标签： javascriptjqueryhtml

解决方案

首先，对两个不同的元素使用相同的 id 是不好的做法

方法一（使用类名） 

<select class = 'batchNo'>
</select>

var result = document.querySelectorAll('.batchNo')
console.log(result) // prints list of all select

querySelectorAll() 将为您提供值列表，然后您可以遍历它并获取所有选择元素的值

方法 2（使用 ID）

正如您所说，您的表处于 for 循环中，那么您可以做的是获得迭代编号。for循环并生成动态ID如下

<select id="batchNo{{ for loop iteration no }}">
</select>

它会生成像batchNo1，batchNo2，batchNo3 ......

推荐阅读