我有一个按钮，它正在复制/克隆选择下拉菜单并使用选择的 Jquery 插件和多选插件。第一个元素显示完美，但是当我单击按钮并复制我无法从选择列表中选择的元素时。所以只有表单域的第一个实例有效，之后添加的其他实例无效。
如果我有不同的 ID，它会起作用，但相同的 ID 会导致问题。如何解决这个问题的任何帮助都将得到重视。
<script>
$(document).ready(function(){
$("#example").multiselect();
});
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
$(".add_field_button").click(function(e){ //on add input button click
e.preventDefault();
var add_button = $(this);
var fieldset = add_button.closest('fieldset');
var wrapper = add_button.closest('.sf-viewport');
var form = add_button.closest('form');
var x = parseInt(fieldset.attr('data-count'));
//var cur_height = 0;
var fieldset_clone;
var fieldset_content;
var viewport_height = 0;
var fieldset_cont = add_button.closest('.sf-step');
if(x < max_fields){ //max input box allowed
//text box increment
fieldset.attr('data-count',x+1);
console.log($(this).siblings().length);
var cur_height = (fieldset_cont.height() * 1 - 99) / ($(this).siblings().length-1);
viewport_height = wrapper.height()*1 + cur_height;
fieldset_cont.height( fieldset_cont.height()*1 + cur_height );
wrapper.height(viewport_height);
fieldset_clone = add_button
.closest('fieldset')
.find('.fieldset-content')
.eq(0)
.clone();
fieldset_clone
.find('[name]')
.each(function(){
$(this).val($(this).prop('defaultValue'));
});
fieldset_content = $('<div>')
.addClass('lol')
.append(fieldset_clone.children());
add_button.before(fieldset_content);
// add remove button
add_remove_btn(fieldset_content);
}
});
function add_remove_btn(item){
item.prepend(
'<a class="btn pull-right om-remove btn-danger" href="#">'+
' <div class="small" style="position:relative; z-index:999;">Slett tidsforbruk</div>'+
'</a>'
);
}
//user click on remove text
$(document).on("click",".om-remove", function(e){
e.preventDefault();
var x = parseInt($(this)
.closest('lol')
.attr('data-count')
);
$(this)
.closest('lol')
.attr('data-count',x-1);
$(this)
.closest('.lol')
.slideUp(function(){
$(this).remove()
})
var height = $(this).closest('lol').height();
var add_button = $(this);
var viewport_height = 0;
var fieldset_cont = add_button.closest('.sf-step');
var wrapper = add_button.closest('.sf-viewport');
var cur_height = (fieldset_cont.height() * 1 - 99) / ($(this).parent().siblings().length-1);
viewport_height = wrapper.height()*1 - cur_height;
fieldset_cont.height( fieldset_cont.height()*1 - cur_height );
wrapper.height(viewport_height);
});
});
</script>
html
<div class="form-group">
<fieldset class="fieldset-language" data-count="1">
<div class="fieldset-content">
<div class="row">
<div class="col-md-5">
<select data-placeholder="Choose" id="ny-matrett" tabindex="2" name="ing[]">
<option value="">Test<option>
</select>
</div>
<div class="col-md-5">
<div class="input-group">
<input name="gram[]" type="text" class="form-control" placeholder="grams">
<div class="input-group-addon"></div>
</div>
</div>
<div class="col-md-2 lol"></div>
</div>
<br><br>
<div class="clearfix"></div>
</div>
<button class="add_field_button btn btn-warning" data-fields="0" name="add">add</button>
<span style="float:right;">
<button type="submit" name="submit" class="btn btn-success">Save</button>
</span>
</fieldset>
</div>