Javascript 如何获取两行不同但id相同的所选选项的值

我的表格在for each循环中，其id设置为

id=“batchNo”

我想获得每行的值

select选项

selected值

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

这是341
这是53
这是341
这是53

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

方法1（使用类名）

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

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

var result=document.querySelectorAll（'.batchNo'））
console.log（result）//打印所有选择项的列表

querySelectorAll（）将为您提供一个值列表，然后您可以在该列表上循环并获取所有select元素的值

方法2（使用Id）

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

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

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

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

---

它将生成像batchNo1、batchNo2、batchNo3这样的id…

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

方法1（使用类名）

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

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

var result=document.querySelectorAll（'.batchNo'））
console.log（result）//打印所有选择项的列表

querySelectorAll（）将为您提供一个值列表，然后您可以在该列表上循环并获取所有select元素的值

方法2（使用Id）

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

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

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

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

它将生成像batchNo1、batchNo2、batchNo3这样的id…

您需要找到“相对的”

选择。以下是您可以做的：


$（'input'）。在（'blur'，function（）上{
const selectVal=$（this.parents（'tr'）.find（'.batchNo'）.find（':selected'）.text（）；
console.log（selectVal）；
});

这是341
这是53
这是341
这是53
您需要找到“相对”
选择。以下是您可以做的：


$（'input'）。在（'blur'，function（）上{
const selectVal=$（this.parents（'tr'）.find（'.batchNo'）.find（':selected'）.text（）；
console.log（selectVal）；
});

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

我已删除了您的内联代码，并在输入中添加了一个类
。runOnFocusOut

一些jquery是通过
.focusout
它使用
.closest（“tr”）
沿DOM树向上移动，直到父表行
在返回DOM树之前，查找id为
#batchNo
的元素，以及使用
选项选择的子选项：选择

最后通过
.text（）
如果这不是你所希望的，请告诉我


演示

//通过新类添加focusout事件
$（“.runOnFocusOut”）.focusout（函数（）{
//向上移动DOM树
//使用选项：选择查找所选选项
//打印文本
console.log（$（this.closest（“tr”）.find（#batchNo选项：selected”）.text（）；
});

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

我已删除了您的内联代码，并在输入中添加了一个类
。runOnFocusOut

一些jquery是通过
.focusout
它使用
.closest（“tr”）
沿DOM树向上移动，直到父表行
在返回DOM树之前，查找id为
#batchNo
的元素，以及使用
选项选择的子选项：选择

最后通过
.text（）
如果这不是你所希望的，请告诉我


演示

//通过新类添加focusout事件
$（“.runOnFocusOut”）.focusout（函数（）{
//向上移动DOM树
//使用选项：选择查找所选选项
//打印文本
console.log（$（this.closest（“tr”）.find（#batchNo选项：selected”）.text（）；
});

这是341
这是53
这是344
这是56
有效HTML中的id必须是唯一的-因此答案是，您不能（可靠地）这样做-使用
$（此项）。查找….
可能吗？属性“id”必须是唯一的。改用“class”。class的使用对@wanjas的代码没有帮助-jquery检索到的第一个元素仍然是第一个select@Jaromanda当然可以。这只是第一步。有没有可能是这样的$（thisrow）。find（标记“select”）（':selected'）。text（）例如，有效HTML中的id必须是唯一的-因此答案是，您不能（可靠地）这样做-使用
$（this）。find…
而不是maybe？属性“id”必须是唯一的。改用“class”。class的使用对@wanjas的代码没有帮助-jquery检索到的第一个元素仍然是第一个select@Jaromanda当然可以。这只是第一步，有没有像这样的可能性$（thisrow）。find（tag“select”）（':selected'）。text（）这是例如mosh Feu你能检查一下这个小提琴吗，因为我想要它的文本而不是值val