我有一个与国家/地区和城市相对应的动态下拉列表。当克隆未正常运行但克隆无法正常运行时。
<script>
$(document).ready(function(){
$(function(){
$(".addButton").click(function(){
$(this).closest("tr").clone(true).appendTo(".Delivery");
});
$(".deleteButton").click(function(){
if ($("table tr").length != 2) {
$("table tr:last").remove();
}
});
});
load_json_data('country');
function load_json_data(id, parent_id)
{
var data_id = $('#data_ids').val();
var html_code = '';
$.getJSON('country_state_city.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('.'+id).html(html_code);
});
}
$(document).on('change', '.country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('.state').html('<option value="">Select state</option>');
$('.city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '.state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('.city').html('<option value="">Select city</option>');
}
});
});
</script> <!DOCTYPE html>
<html>
<head>
<script src="https:ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</br></br>
<form method="post" action="RGAForm.php">
<table class="Delivery">
<tr>
<th>Country Name</th>
<th>State Name</th>
<th>City Name</th>
</tr>
<tr>
<td>
<select name="country" class="form-control input-lg country" id="country_1 data-id="1">
<option value="">Select country</option>
</select>
</td>
<td>
<select name="state" class="form-control input-lg state" id="state_1" data-id="1">
<option value="">Select state</option>
</select>
</td>
<td>
<select name="city" class="form-control input-lg city" id="city_1 data-id="1">
<option value="">Select city</option>
</select>
</td>
<td><input type="button" style="background-color:#a7cb00;" class="form-control input-lg addButton" value="add"/></td>
<td><input type="button" style="background-color:blue;" class="form-control input-lg deleteButton" value="delete"/></td>
</tr>
<tr id="append_data">
</td>
</table>
<input type="hidden" id="data_ids" value="2">
</form>
</body>
</html>
我正在处理国家/地区和城市的依存下拉列表并对其进行克隆。但是每次添加时，我单击第一个选择框都会清除以前所有内容的内容。请帮助我更正此代码。< / p>