select by option总是返回相同的值 - jquery

时间：2017-04-27 05:35:41

标签： javascript jquery html

我是以下的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的第一个值。

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

提前致谢。

6 个答案:

答案 0 :(得分：2)

您已命名为td checklist。 id应该是唯一的。你应该使用类来代替。

＆＃13;
＆＃13; 
$(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);
     });
    });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

将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();});实际上不需要，因为您已在each()上应用<tr>。

答案 2 :(得分：1)

问题在于：

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

这里你循环使用每个select元素，但总是得到$('#health') select的值。将其更改为：

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

再试一次。

答案 3 :(得分：1)

你使用这样的colud。你使用相同的id。id是唯一的，所以只有它返回第一个选择的值而不是第二个。所以与$(this)一起使用。它会验证row

中的每个select 
$(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>

答案 4 :(得分：1)

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

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

答案 5 :(得分：0)

我的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);
     });
    });
});
相关问题
最新问题