Bootstrap 多个 select 下拉列表在追加时不起作用
Bootstrap Multiple select dropdown not working while appending
我将包含多个 select 下拉菜单的 html 添加到另一个 div 按钮点击;但在附加 div 多个 select 下拉列表后不起作用。这是我的代码 Example
请帮我解决这个问题。谢谢
在调用多选之前保存 html,在追加时重建多选
var html = $('#multiselect').html();
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
$('#append-btn').click(function(){
$(html).appendTo('.div2');
$('.multiselect-ui').multiselect('rebuild')
})
给你解决方案https://fiddle.jshell.net/0tpLod7h/1/
var cnt = 2;
var html = $('#multiselect').html();
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
$('#append-btn').click(function(){
cnt++;
$(html).appendTo('.div2');
$('.div2 > div').last().find('select').attr('id', 'dates-field' + cnt);
$('#dates-field' + cnt).multiselect('rebuild');
})
span.multiselect-native-select {
position: relative
}
span.multiselect-native-select select {
border: 0!important;
clip: rect(0 0 0 0)!important;
height: 1px!important;
margin: -1px -1px -1px -3px!important;
overflow: hidden!important;
padding: 0!important;
position: absolute!important;
width: 1px!important;
left: 50%;
top: 30px
}
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0
}
.multiselect-container .input-group {
margin: 5px
}
.multiselect-container>li {
padding: 0
}
.multiselect-container>li>a.multiselect-all label {
font-weight: 700
}
.multiselect-container>li.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700
}
.multiselect-container>li.multiselect-group-clickable label {
cursor: pointer
}
.multiselect-container>li>a {
padding: 0
}
.multiselect-container>li>a>label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 0 3px 30px
}
.multiselect-container>li>a>label.radio, .multiselect-container>li>a>label.checkbox {
margin: 0
}
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px
}
.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
padding: 3px 20px 3px 40px
}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
margin-left: -20px;
margin-right: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="multiselect">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
<div class="div2">
</div>
<button id="append-btn">Append
</button>
您可以附加当前代码的直接 html 代码。
此示例还允许您从克隆下拉列表中选择 Select All 选项。
例如:
<script>
var i = 0;
$('#append-btn').click(function(){
var html = '';
html += '<div class="form-group" id="multiselect">';
html += '<label class="col-md-4 control-label" for="rolename">Role Name</label>';
html += '<div class="col-md-4 test">';
html += ' <select id="dates-field2" class="multiselect-ui'+i+' form-control" multiple="multiple">';
html += ' <option value="cheese">Cheese</option>';
html += ' <option value="tomatoes">Tomatoes</option>';
html += ' <option value="mozarella">Mozzarella</option>';
html += ' <option value="mushrooms">Mushrooms</option>';
html += ' <option value="pepperoni">Pepperoni</option>';
html += ' <option value="onions">Onions</option>';
html += ' </select>';
html += '</div>';
html += '</div>';
$(html).appendTo('.div2');
$('.multiselect-ui'+i).multiselect({
includeSelectAllOption: true
});
i++
});
</script>
这里有一个解决方案 您自己 fiddle.
问题很简单 - 问题是当我们追加代码时,我们必须 destroy
任何 plugin
里面使用的 plugin
和 re-init
再来一次.
因为追加只是复制HTML代码并重新粘贴,当插件被调用到页面时它永远不会出现在圆顶中,所以插件将不适用于附加元素。为此,我们必须召回插件。
希望对您有所帮助干杯。
这是 link 的答案 jsfiddle
请找到下面提到的解决方案。
在 html 中,您需要创建如下所述的模板。
<div id="template" class="hidden">
<div class="form-group" id="multiselect">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
</div>
这是您的 jQuery 代码。
var html = $('#template').html();
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
$('#append-btn').click(function() {
$(html).appendTo('.div2');
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
});
您可以在此处找到工作 fiddle:https://fiddle.jshell.net/wuyy56gs/1/
如果不起作用请告诉我。
我将包含多个 select 下拉菜单的 html 添加到另一个 div 按钮点击;但在附加 div 多个 select 下拉列表后不起作用。这是我的代码 Example
请帮我解决这个问题。谢谢
在调用多选之前保存 html,在追加时重建多选
var html = $('#multiselect').html();
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
$('#append-btn').click(function(){
$(html).appendTo('.div2');
$('.multiselect-ui').multiselect('rebuild')
})
给你解决方案https://fiddle.jshell.net/0tpLod7h/1/
var cnt = 2;
var html = $('#multiselect').html();
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
$('#append-btn').click(function(){
cnt++;
$(html).appendTo('.div2');
$('.div2 > div').last().find('select').attr('id', 'dates-field' + cnt);
$('#dates-field' + cnt).multiselect('rebuild');
})
span.multiselect-native-select {
position: relative
}
span.multiselect-native-select select {
border: 0!important;
clip: rect(0 0 0 0)!important;
height: 1px!important;
margin: -1px -1px -1px -3px!important;
overflow: hidden!important;
padding: 0!important;
position: absolute!important;
width: 1px!important;
left: 50%;
top: 30px
}
.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0
}
.multiselect-container .input-group {
margin: 5px
}
.multiselect-container>li {
padding: 0
}
.multiselect-container>li>a.multiselect-all label {
font-weight: 700
}
.multiselect-container>li.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: 700
}
.multiselect-container>li.multiselect-group-clickable label {
cursor: pointer
}
.multiselect-container>li>a {
padding: 0
}
.multiselect-container>li>a>label {
margin: 0;
height: 100%;
cursor: pointer;
font-weight: 400;
padding: 3px 0 3px 30px
}
.multiselect-container>li>a>label.radio, .multiselect-container>li>a>label.checkbox {
margin: 0
}
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px
}
.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
padding: 3px 20px 3px 40px
}
.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
margin-left: -20px;
margin-right: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="multiselect">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
<div class="div2">
</div>
<button id="append-btn">Append
</button>
您可以附加当前代码的直接 html 代码。 此示例还允许您从克隆下拉列表中选择 Select All 选项。 例如:
<script>
var i = 0;
$('#append-btn').click(function(){
var html = '';
html += '<div class="form-group" id="multiselect">';
html += '<label class="col-md-4 control-label" for="rolename">Role Name</label>';
html += '<div class="col-md-4 test">';
html += ' <select id="dates-field2" class="multiselect-ui'+i+' form-control" multiple="multiple">';
html += ' <option value="cheese">Cheese</option>';
html += ' <option value="tomatoes">Tomatoes</option>';
html += ' <option value="mozarella">Mozzarella</option>';
html += ' <option value="mushrooms">Mushrooms</option>';
html += ' <option value="pepperoni">Pepperoni</option>';
html += ' <option value="onions">Onions</option>';
html += ' </select>';
html += '</div>';
html += '</div>';
$(html).appendTo('.div2');
$('.multiselect-ui'+i).multiselect({
includeSelectAllOption: true
});
i++
});
</script>
这里有一个解决方案 您自己 fiddle.
问题很简单 - 问题是当我们追加代码时,我们必须 destroy
任何 plugin
里面使用的 plugin
和 re-init
再来一次.
因为追加只是复制HTML代码并重新粘贴,当插件被调用到页面时它永远不会出现在圆顶中,所以插件将不适用于附加元素。为此,我们必须召回插件。
希望对您有所帮助干杯。
这是 link 的答案 jsfiddle
请找到下面提到的解决方案。
在 html 中,您需要创建如下所述的模板。
<div id="template" class="hidden">
<div class="form-group" id="multiselect">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
</div>
这是您的 jQuery 代码。
var html = $('#template').html();
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
$('#append-btn').click(function() {
$(html).appendTo('.div2');
$('.multiselect-ui').multiselect({
includeSelectAllOption: true
});
});
您可以在此处找到工作 fiddle:https://fiddle.jshell.net/wuyy56gs/1/
如果不起作用请告诉我。