演示

Question

我的表在每个循环中使用，其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

Answer 1

首先，对两个不同的元素使用相同的ID是不正确的做法

方法1（使用班级名称）

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

它将生成ID，例如batchNo1，batchNo2，batchNo3。...

Answer 2

您需要找到“相对” select。您可以执行以下操作：

$('input').on('blur', function() {
  const selectVal = $(this).parents('tr').find('.batchNo').find(':selected').text();
  console.log(selectVal);
});

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

<table>
  <tr>
    <td>
      <select class="batchNo">
        <option value="341" selected>this is 341</option>
        <option value="53">this is 53</option>
      </select>
    </td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>
      <select class="batchNo">
        <option value="341">this is 341</option>
        <option value="53" selected>this is 53</option>
      </select>
    </td>
    <td><input type="text" /></td>
  </tr>
</table>

显然，为避免重复的id，您需要更改为其他内容，例如class。（您也可以使用data-*属性）

Answer 3

更新问题时，我认为这可以回答您特别需要解决的问题。不过，我同意先前的答案，最好使id在整个页面中都是唯一的。

我已经删除了您的内联代码，并在输入s中添加了类.runOnFocusOut

某些jquery是通过.focusout
使用.closest("tr")
返回DOM树之前，先找到ID为#batchNo的元素，并找到一个由option:select选择的子选项
最后通过.text()打印该选项的文本

让我知道这是否不是您想要的

演示

// Add focusout event via new class
$(".runOnFocusOut").focusout( function() {

  // Travel up DOM tree
  // Find selected options using option:select
  // Print the text
  console.log(  $(this).closest("tr").find("#batchNo option:selected").text() );

});

<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" class="runOnFocusOut"></td>
  </tr>
  <tr>
    <td>
      <select id="batchNo">
        <option value="344">this is 344</option>
        <option value="56" selected>this is 56</option>
      </select>
    </td>
    <td><input type="text" class="runOnFocusOut"></td>
  </tr>
</table>

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

3 个答案:

演示