无法使用jQuery获取选择项的数据

时间：2019-01-30 13:37:29

标签： javascript jquery html

我有一个选择选项和输入类型的文本，以及一个用于添加数据新行的按钮。

我尝试为此编写代码，但是在按钮上添加新行时，不会填充选择项的数据。

有关以下更多信息，请参见代码

var i=2;
  $(".addmore").on('click',function(){
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
        data +="<td><input type='select' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td></tr>";
        $('table').append(data);
        i++;
});

$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
    $('.check_all').prop("checked", false); 
	check();

});

function select_all() {
	$('input[class=case]:checkbox').each(function(){ 
		if($('input[class=check_all]:checkbox:checked').length == 0){ 
			$(this).prop("checked", false); 
		} else {
			$(this).prop("checked", true); 
		} 
	});
}
<script src="http://demo.smarttutorials.net/auto_table/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellspacing="0">
      <tr>
        <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
        <th>S. No</th>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
      <tr>
        <td><input type='checkbox' class='case'/></td>
        <td>1.</td>
       <td><select name="first_name[]" id="first_name" class="form-group">
					<option value="0">--Select--</option>
					<option value="1">Aisles &amp; common areas</option>
					<option value="3">BOH Storage area</option>
					<option value="2">Baggage Counter</option>
					<option value="6">CSD/Departmental POS</option>
					<option value="4">Cash room</option>
					<option value="5">Commercial Desk</option>
					<option value="7">Display area</option>
					<option value="8">Dock Doors</option>
					<option value="9">Electronic items area</option>
					<option value="10">Emergency exit</option>
					<option value="11">Escalator &amp; lifts</option>
					<option value="12">General surveillance areas</option>
					<option value="13">Goldsmith Room</option>
					<option value="16">High Value Accessories Rack</option>
					<option value="15">High pilferage</option>
					<option value="17">High value FMCG room</option>
					<option value="18">Inbound</option>
					<option value="19">Key Item Merchandiser</option>
					<option value="23">MPOS</option>
					<option value="20">Main Entry/Exit</option>
					<option value="21">Manager Room</option>
					<option value="22">Material Entry / Exit</option>
					<option value="24">Out bound Office</option>
					<option value="25">Outdoor Surveillance</option>
					<option value="27">Outside Trial rooms</option>
					<option value="26">Outside the frisking area</option>
					<option value="30">POS</option>
					<option value="28">Perimeter Area</option>
					<option value="29">Personal care</option>
					<option value="31">Power aisles to monitor customer movements</option>
					<option value="32">Racking area</option>
					<option value="33">ResQ Room/ Desk</option>
					<option value="34">Safe room</option>
					<option value="35">Sales floor</option>
					<option value="36">Saloon Entry /Exit</option>
					<option value="37">Shelving Area</option>
					<option value="38">Staff Entry / Exit</option>
					<option value="39">Staircase &amp; Fire Exit</option>
					<option value="40">Stock Room Exit</option>
					<option value="41">Vendor room</option>
					<option value="42">Wrap Desk</option>
					<option value="14">high end Cosmetics</option>

</select></td>
        <td><input type='text' id='last_name' name='last_name[]'/></td>
        
      </tr>
    </table>
    
    
     <button type="button" class='delete'>- Delete</button>
    <button type="button" class='addmore'>+ Add More</button>
    <p>
    <input type='submit' name='submit' value='submit' class='but'/></p>

那么我将如何获得所选项目的数据。

有关更多信息，请参见小提琴here

更新

我添加了一个单选按钮以获取有关是/否的更多信息，如下所示

下面是相同的小提琴

JS Fiddle

2 个答案:

答案 0 :(得分：2)

您可以这样操作：

var i = 2;
$(".addmore").on('click', function() {
  var data = "<tr><td><input type='checkbox' class='case'/></td><td>" + i + ".</td>";
  var select_data = $("#select_data").html();
  data += "<td>" + select_data.replace('id="first_name"', 'id="first_name'+i+'"') + "</td>";
  data += "<td><input type='text' id='last_name" + i + "' name='last_name[]'/></td></tr>";
  $('table').append(data);
  i++;
});

$(".delete").on('click', function() {
  $('.case:checkbox:checked').parents("tr").remove();
  $('.check_all').prop("checked", false);
  check();

});

function select_all() {
  $('input[class=case]:checkbox').each(function() {
    if ($('input[class=check_all]:checkbox:checked').length == 0) {
      $(this).prop("checked", false);
    } else {
      $(this).prop("checked", true);
    }
  });
}
<script src="http://demo.smarttutorials.net/auto_table/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" cellspacing="0">
  <tr>
    <th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
    <th>S. No</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td><input type='checkbox' class='case' /></td>
    <td>1.</td>
    <td id="select_data">
      <select name="first_name[]" id="first_name" class="form-group">
        <option value="0">--Select--</option>
        <option value="1">Aisles &amp; common areas</option>
        <option value="3">BOH Storage area</option>
        <option value="2">Baggage Counter</option>
        <option value="6">CSD/Departmental POS</option>
        <option value="4">Cash room</option>
        <option value="5">Commercial Desk</option>
        <option value="7">Display area</option>
        <option value="8">Dock Doors</option>
        <option value="9">Electronic items area</option>
        <option value="10">Emergency exit</option>
        <option value="11">Escalator &amp; lifts</option>
        <option value="12">General surveillance areas</option>
        <option value="13">Goldsmith Room</option>
        <option value="16">High Value Accessories Rack</option>
        <option value="15">High pilferage</option>
        <option value="17">High value FMCG room</option>
        <option value="18">Inbound</option>
        <option value="19">Key Item Merchandiser</option>
        <option value="23">MPOS</option>
        <option value="20">Main Entry/Exit</option>
        <option value="21">Manager Room</option>
        <option value="22">Material Entry / Exit</option>
        <option value="24">Out bound Office</option>
        <option value="25">Outdoor Surveillance</option>
        <option value="27">Outside Trial rooms</option>
        <option value="26">Outside the frisking area</option>
        <option value="30">POS</option>
        <option value="28">Perimeter Area</option>
        <option value="29">Personal care</option>
        <option value="31">Power aisles to monitor customer movements</option>
        <option value="32">Racking area</option>
        <option value="33">ResQ Room/ Desk</option>
        <option value="34">Safe room</option>
        <option value="35">Sales floor</option>
        <option value="36">Saloon Entry /Exit</option>
        <option value="37">Shelving Area</option>
        <option value="38">Staff Entry / Exit</option>
        <option value="39">Staircase &amp; Fire Exit</option>
        <option value="40">Stock Room Exit</option>
        <option value="41">Vendor room</option>
        <option value="42">Wrap Desk</option>
        <option value="14">high end Cosmetics</option>

      </select>
    </td>
    <td><input type='text' id='last_name' name='last_name[]' /></td>

  </tr>
</table>


<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
  <input type='submit' name='submit' value='submit' class='but' /></p>

基本上，您向包含选择<td id="select_data">的td添加一个id，然后每次使用

单击添加按钮，便获得其html内容。 
data += "<td>" + $("#select_data").html() + "</td>"

答案 1 :(得分：0)

元素ID必须唯一。尝试克隆元素并创建一个唯一的ID。在行上使用jQuery clone函数。您将需要为原始行创建一个ID（在示例中，我假设为row1的ID）。 

var lastRow = $('tr[id^="row"]:last'); // get last row
var num = parseInt(lastRow.prop('id').match(/\d+/g), 10) + 1; // get number in row id and add 1
var newRow = lastRow.clone().prop('id', 'row' + num);
newRow.insertAfter(lastRow);
相关问题
最新问题