我正在动态添加多个包含选择选项的 div,并希望从下一个选择框中删除在第一次选择中选择的选项。
请在此处查看 jdfiddle:http: //jsfiddle.net/MSvje/
<div class="center">
<div class="row-fluid">
<div class="span3">
<select class="chosen-select" id="form-field-select-3" data-placeholder="Choose a Country...">
<option value="">Text</option>
<option value="AL">Department</option>
<option value="AK">City</option>
<option value="AZ">State</option>
<option value="AR">Country</option>
<option value="CA">Industry</option>
</select>
</div>
</div>
</div>
<a href="javascript:void(0);" id="search-add"><i class="icon-plus">Add One</i></a>
<br />
<a href="javascript:void(0);" id="search-remove"><i class="icon-minus">Remove One</i></a>
JS代码:
jQuery(function($) {
$("#search-add").click(function () {
if( ($('.center .row-fluid').length+1) > 5) {
alert("Only 5 allowed");
return false;
}
var id = ($('.center .row-fluid').length + 1).toString();
$('.center').append('<div class="row-fluid"><div class="span3"><select class="chosen-select" id="form-field-select-3" data-placeholder="Choose a Country..."><option value="">Text</option><option value="AL">Department</option><option value="HI">City</option><option value="HI">State</option><option value="HI">Country</option><option value="HI">Industry</option></select></div>');
});
$("#search-remove").click(function () {
if ($('.center .row-fluid').length == 1) {
alert("No more textbox to remove");
return false;
}
$(".center .row-fluid:last").remove();
});
});