这是代码，当您选择opt1时，opt2将更改为适当的。但是在新添加的行中（当您单击“添加行”按钮时将添加行）。，并未在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>
提前致谢
答案 0 :(得分：1)
问题是类别处理程序，它需要侦听更改事件而不是单击事件。
您还需要找到同一行中的subcategory元素
$(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>');
}
}
});
});
演示：Fiddle
答案 1 :(得分：0)
只需用$（this）更改你的jquery，只使用相应的tr子类别进行更改，而不是全部。
$(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>