![多选]( "多选")
本文介绍了如何动态克隆bootstrap多选？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$（function（）{$（'＃days'）。multiselect（{includeSelectAllOption：true}）; $（'＃btnSelected'）。click（function（）{var selected = $ （#days option：selected）; var message =; selected.each（function（）{message + = $（this）.text（）++ $（this）.val（）+\\ \\ n;}）; document.write（message）;}）;}）;
< link href =http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.cssrel =stylesheettype =text / css />< link href =http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css =stylesheettype =text / css/ >< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script>< script src =http：/ /netdna.bootstrapcdn.com/bootstrap/3.3.2/js/ bootstrap.min.js >< /脚本>< SCRIPT SRC = http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js>< ; / script>< select id =daysmultiple =multiple> < option value =1>因此，当天< / option> < option value =2>周日< / option> < option value =3>星期一< / option> < option value =4>星期二< / option> < option value =5> friday< / option>< / select>< input type =buttonid =btnSelectedvalue =Get Selected/>< button type =button id =btn> + Add Another Set of Hourse< / button>
我尝试做类似的事情时，我点击添加更多按钮，多选下拉列表将被克隆。每当我点击提交时，它会显示所有多重选择的选定值。
增加了点击添加按钮克隆多选的功能。此外，我修改了选择方法以从所有多选下拉列表中选择值。
$（'＃days'）。多选（{includeSelectAllOption：真}）; VAR I = 1; $（ '＃btnAddAnother'）点击（函数（）{VAR clone_multiselect = $（ ＃天）的clone（）; clone_multiselect.attr（ '身份证' ，'days'+ i）; clone_multiselect.appendTo（。multiselect_container）; $（clone_multiselect）.multiselect（{includeSelectAllOption：true}）; i ++;}）; $（'＃btnGetSelected'）。click（function（）{$（'。results'）。empty（）; $（'select.multiselect'）。each（function（）{var id = $（this）.attr （ 'ID'）; VAR selected_option_selector = '＃' + ID + '选项：选择'; VAR result_str = '< b取代;' + ID + '< / b计算值：'; $（selected_option_selector）。每个（函数（）{result_str + = $（this）.text（）+' - '+ $（this）.val（）+'，';}）; result_str = result_str.substring（0，result_str.length - 2）; result_str + ='< br />'; $（'。results'）。append（result_str）;}）;}）; .results {margin-top：20px;}
< link href =http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.cssrel = stylesheettype =text / css/>< link href =http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.cssrel = stylesheettype =text / css/>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>< / script>< script src =http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js>< / script>< script src =http：// cdn .rawgit.com / davidstutz / bootstrap-multiselect / master / dist / js / bootstrap-multiselect.js>< / script>< div class =multiselect_container> < select id =daysclass =multiselectmultiple =multiple> < option value =1>因此，当天< / option> < option value =2>周日< / option> < option value =3>星期一< / option> < option value =4>星期二< / option> < option value =5>星期五< / option> < /选择>< / DIV><峰; br /><按钮ID = btnGetSelected 类= BTN BTN-初级 >获取被选择的LT; /按钮><按钮ID = btnAddAnother 类= btn btn-primary> +添加另一套Hourse< / button>< div class =results>< / div>
$(function() {
$('#days').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function() {
var selected = $("#days option:selected");
var message = "";
selected.each(function() {
message += $(this).text() + " " + $(this).val() + "\n";
});
document.write(message);
});
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<select id="days" multiple="multiple">
<option value="1">thusday</option>
<option value="2">sunday</option>
<option value="3">monday</option>
<option value="4">tuesday</option>
<option value="5">friday</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
<button type="button" id="btn">+ Add Another Set OF Hourse
</button>
I am trying to do something like that when I click on add more button, multi-select drop-down will be cloned. And whenever, I click on submit it will show me selected values of all the multi-select(s).
解决方案
I have added functionality to clone multi-select on clicking the add button. Moreover, I have modified selection method to get selected values from all the multi-select drop-down.
$('#days').multiselect({
includeSelectAllOption: true
});
var i = 1;
$('#btnAddAnother').click(function(){
var clone_multiselect = $("#days").clone();
clone_multiselect.attr('id', 'days' + i);
clone_multiselect.appendTo(".multiselect_container");
$(clone_multiselect).multiselect({
includeSelectAllOption: true
});
i++;
});
$('#btnGetSelected').click(function() {
$('.results').empty();
$('select.multiselect').each(function(){
var id = $(this).attr('id');
var selected_option_selector = '#' + id + ' option:selected';
var result_str = '<b>' + id + '</b>: ';
$(selected_option_selector).each(function(){
result_str += $(this).text() + ' - ' + $(this).val() + ', ';
});
result_str = result_str.substring(0, result_str.length - 2);
result_str += '<br />';
$('.results').append(result_str);
});
});
.results {
margin-top: 20px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<div class="multiselect_container">
<select id="days" class="multiselect" multiple="multiple">
<option value="1">thusday</option>
<option value="2">sunday</option>
<option value="3">monday</option>
<option value="4">tuesday</option>
<option value="5">friday</option>
</select>
</div>
<br />
<button id="btnGetSelected" class="btn btn-primary">Get Selected</button>
<button id="btnAddAnother" class="btn btn-primary">+ Add Another Set OF Hourse</button>
<div class="results"></div>
Fiddle DEMO
这篇关于如何动态克隆bootstrap多选？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！