我正在动态添加包含选择选项的多个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 CODE:
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();
});
});
答案 0 :(得分:1)
您遇到多个ID问题。 Id必须是唯一的。
试试这个:
var clone = $('.row-fluid').last().clone();
clone.find('#form-field-select-3').prop('id','clone_'+ids);
clone.find('option:selected').remove()