4 fdvds
Reputation: 97
Select is not working for the newly added rows
This is the code , when you select the opt1 the opt2 will change appropriate. But in the newly added row ( row will add when you click on the Add row button)., is not generating the proper options in opt2.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/css/datepicker.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th> <th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input id = "date0" type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<select name="category" class="input category"> <option value = "Week">Week</option>
<option selected value = "Month">Month</option>
<option value = "Year">Year</option></select>
</td><td>
<select name="sub_category" class="input sub_category"></select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<script>
$(document).ready(function(){
var i=1;
$(document).on("click", "#add_row", function(){
var datepic = "#date" + i;
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input id = 'date"+
i+"' name='name" + i +
"' type='text' placeholder='Name' class='form-control input-md'/>"
+ "</td><td><input name='mail" +
i + "' type='text' placeholder='Mail' class='form-control input-md'>"
+"</td><td><select class='input category'><option value ='Week'>Week</option><option value = 'Month'>Month</option><option value ='Year'>Year</option></select></select>"
+"</td>"+"</td><td><select class='input sub_category'></select>"
+"</td>");
$(datepic).datepicker();
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$(document).on("click","#delete_row", function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
$(document).on("click",".category", function(){
var new_category = $(".category").val();
var temp = '{"Week": ["2014-02-24", "2014-02-17", "2011-01-03"], "Month": ["Feb 2014", "Apr 2011", "Jan 2011"], "Year": [2014, 2013, 2012, 2011]}';
temp = JSON.parse(temp);
$(".sub_category").find('option').remove();
$.each(temp,function(key, value)
{
if (key == new_category) {
var sub_cats = value.toString().split(',');
for(var i=0;i<sub_cats.length;i++)
{
$(".sub_category").append('<option value= "' + sub_cats[i] + '">' + sub_cats[i] + '</option>');
}
}
});
});
});
$(function() {
var startDate = new Date(2015,2,30);
$('#date0').datepicker('setDate',startDate);
});
</script>
</body>
</html>Thanks in advance
Upvotes: 2
Views: 209
Answers (2)
sanjeev shetty
Reputation: 458
Just change your jquery with $(this), to make the changes only with the respective tr's sub category not with all.
$(document).ready(function(){
var i=1;
$(document).on("click", "#add_row", function(){
var datepic = "#date" + i;
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input id = 'date"+
i+"' name='name" + i +
"' type='text' placeholder='Name' class='form-control input-md'/>"
+ "</td><td><input name='mail" +
i + "' type='text' placeholder='Mail' class='form-control input-md'>"
+"</td><td><select class='input category'><option value ='Week'>Week</option><option value = 'Month'>Month</option><option value ='Year'>Year</option></select></select>"
+"</td>"+"</td><td><select class='input sub_category'></select>"
+"</td>");
$(datepic).datepicker();
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$(document).on("click","#delete_row", function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
$(document).on("change",".category", function(){
$this = $(this);
var new_category = $this.val();
var temp = '{"Week": ["2014-02-24", "2014-02-17", "2011-01-03"], "Month": ["Feb 2014", "Apr 2011", "Jan 2011"], "Year": [2014, 2013, 2012, 2011]}';
temp = JSON.parse(temp);
$this.parents('tr').find(".sub_category").find('option').remove();
$.each(temp,function(key, value)
{
if (key == new_category) {
var sub_cats = value.toString().split(',');
for(var i=0;i<sub_cats.length;i++)
{
$this.parents('tr').find(".sub_category").append('<option value= "' + sub_cats[i] + '">' + sub_cats[i] + '</option>');
}
}
});
});
});
$(function() {
var startDate = new Date(2015,2,30);
$('#date0').datepicker('setDate',startDate);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th> <th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input id = "date0" type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<select name="category" class="input category"> <option value = "Week">Week</option>
<option selected value = "Month">Month</option>
<option value = "Year">Year</option></select>
</td><td>
<select name="sub_category" class="input sub_category"></select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>Upvotes: 0
Arun P Johny
Reputation: 388416
The problem is the category handler, which need to listen to change event not click event.
Also you need to find the subcategory element which is in the same row
$(document).on("change", ".category", function() {
var new_category = $(this).val();
var temp = '{"Week": ["2014-02-24", "2014-02-17", "2011-01-03"], "Month": ["Feb 2014", "Apr 2011", "Jan 2011"], "Year": [2014, 2013, 2012, 2011]}';
temp = JSON.parse(temp);
var $sub = $(this).closest('tr').find(".sub_category");
$sub.find('option').remove();
$.each(temp, function(key, value) {
if (key == new_category) {
var sub_cats = value.toString().split(',');
for (var i = 0; i < sub_cats.length; i++) {
$sub.append('<option value= "' + sub_cats[i] + '">' + sub_cats[i] + '</option>');
}
}
});
});
Demo: Fiddle
Upvotes: 1
Related Questions
- Addition On javascript Not working when new row is added
- Adding a new <select> to a table row using Jquery, JavaScript
- JQuery/Ajax function not working for a new row generated
- add new rows, jQuery code doesn't work
- Onclick event is not working in new added rows
- Why the Select box is not changing the value while dynamically adding the Row to the table?
- jQuery keep value of select option when new row is added
- Adding new row to table is not working using jquery
- On change isn't working for newly added row
- jQuery selecting row inserted using