选择 by 选项始终返回相同的值 - jQuery - select by option always return same value

我有下面的html。

<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist">TPS on Desktop</td>
<td class="tdcolor">
<select id="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist">TPS on Mobile</td>
<td class="tdcolor">
<select id="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

在下面写了jquery来提取我的td单元格中的数据。

$(document).ready(function() {
$('#saveButton').click(function() {
$('#myTable tr:not(:first-child)').each(function(){
var checklistText =$(this).find('#checklist').text();
var commentsText = $(this).find('#comments').val();
var selectedText ;
$('select').each(function() {
selectedText = $('#health option:selected').text();
});
alert(checklistText+' : '+selectedText);
});
});
});

如果我在第一行中选择Green并在第二行中选择Amber，我希望输出是TPS on Desktop : Green和TPS on Mobile : Amber。

但是，输出始终是TPS on Desktop : Green和TPS on Mobile : Green.第二个选择值永远不会被拾取，但会拾取 td 的第一个值。

任何帮助都会有很大帮助。

提前谢谢。

您已将 tdchecklist命名为。id 应该是唯一的。您应该改用类。

$(document).ready(function() {
$('#saveButton').click(function() {
$('#myTable tr:not(:first-child)').each(function(){
var checklistText =$(this).find('.checklist').text();
var commentsText = $(this).find('#comments').val();
var selectedText ;
selectedText = $(this).find('.health option:selected').text();
alert(checklistText+' : '+selectedText);
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist1" class="checklist">TPS on Desktop</td>
<td class="tdcolor">
<select id="health1" class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist2" class="checklist">TPS on Mobile</td>
<td class="tdcolor">
<select id="health2" class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

将id转换为class，然后在jquery代码中进行一些更改，它将起作用。

例：-

$(document).ready(function() {
$('#saveButton').click(function() {
$('#myTable tr:not(:first-child)').each(function(){
var checklistText =$(this).find('#checklist').text();
var commentsText = $(this).find('#comments').val();
//check code change here
var selectedText = $(this).find('.health option:selected').text();
alert(checklistText+' : '+selectedText);
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist">TPS on Desktop</td>
<td class="tdcolor">
<select class="health"><!-- convert id to class-->
	 <option value=0>Select</option>
	 <option value="1">Green</option>
	 <option value="2">Amber</option>
	 <option value="3">Red</option>
</select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist">TPS on Mobile</td>
<td class="tdcolor">
<select class="health"><!-- convert id to class-->
	 <option value=0>Select</option>
	 <option value="1">Green</option>
	 <option value="2">Amber</option>
	 <option value="3">Red</option>
</select>  
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

注意：-

代码片段：- $('select').each(function() {selectedText = $('#health option:selected').text();});实际上不需要，因为您已经在<tr>上应用each()。

问题就在这里：

$('select').each(function() {
selectedText = $('#health option:selected').text();
});

在这里，您循环使用每个选择元素，但始终获取$('#health')选择的值。将其更改为：

$('select').each(function() {
selectedText = $(this).find('option:selected').text();
});

然后重试。

你像这样使用.你使用相同的id.id是唯一的，因此只有它返回第一个选定的值，而不是第二个 one.so 与$(this)一起使用.it将验证select中的每个row

$(this).find('select').each(function() {
selectedText = $(this).children('option:selected').text();
});

$(document).ready(function() {
$('#saveButton').click(function() {
$('#myTable tr:not(:first-child)').each(function() {
var checklistText = $(this).find('#checklist').text();
var commentsText = $(this).find('#comments').val();
var selectedText;
$(this).find('select').each(function() {
selectedText = $(this).children('option:selected').text();
});
alert(checklistText + ' : ' + selectedText);
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td id="checklist">TPS on Desktop</td>
<td class="tdcolor">
<select id="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td id="checklist">TPS on Mobile</td>
<td class="tdcolor">
<select id="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>
</td>
<td><textarea id="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>

这个问题很简单。无论您在第二个下拉列表中选择什么值，脚本都会提醒第一个下拉列表中的值，这背后的原因是相同的"id=health"。每次执行脚本时，它都会从顶部获取元素，并使用首先找到的元素。因此，对两个下拉列表都使用唯一 id。

"使用带有id选择器的$()作为其参数将返回一个jQuery对象，其中包含零个或一个DOM元素的集合。每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是，不应依赖此行为;具有多个元素使用相同 ID 的文档无效。

我的JS小提琴没用了。实际问题是您重复使用相同的 elt ID

https://jsfiddle.net/jinspeter/3qokLuff/

<table border="1" id="myTable">
<tr>
<th><b>CheckList</b></th>
<th><b>Health</b></th>
<th><b>Comments</b></th>
</tr>
<tr>
<td class="checklist">TPS on Desktop</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>  
</td>
<td><textarea class="comments" type="text" name='Comments'></textarea></td>
</tr>
<tr>
<td class="checklist">TPS on Mobile</td>
<td class="tdcolor">
<select class="health">
<option value=0>Select</option>
<option value="1">Green</option>
<option value="2">Amber</option>
<option value="3">Red</option>
</select>  
</td>
<td><textarea class="comments" type="text" name='Comments'></textarea></td>
</tr>
</table>
<br>
<center><input id="saveButton" type="submit" value="Save & Continue"></center>
$(document).ready(function() {
$('#saveButton').click(function() {
$('#myTable tr:not(:first-child)').each(function(){
var checklistText =$(this).find('.checklist').text();
var commentsText = $(this).find('.comments').val();
var selectedText = $(this).find('select.health option:selected').text();
alert(checklistText+' : '+selectedText);
});
});
});

选择 by 选项始终返回相同的值 - jQuery

相关内容

最新更新

热门标签：