您的位置:首页 > Web前端 > BootStrap

bootstrap-select.js 下拉框多选后动态赋值

2018-02-28 17:38 736 查看
话不多说先上demo 其实demo是从官网下载的 只稍作改动 由于没有搞清楚怎么上传源代码 就把官网的链接贴出来吧 https://github.com/silviomoreto/bootstrap-select/archive/master.zip
其中改动的部分

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, maxOptions=2</label>

<div class="col-lg-10">
<select id="maxOption2" class="selectpicker show-menu-arrow form-control" multiple >
<option value="chicken">chicken</option>
<option value="turkey">turkey</option>
<option value="duck">duck</option>
<option value="goose">goose</option>
</select>
</div>
</div>
</form>


<script>
document.addEventListener('DOMContentLoaded', function () {
var mySelect = $('#first-disabled2');

$('#special').on('click', function () {
mySelect.find('option:selected').prop('disabled', true);
mySelect.selectpicker('refresh');
});

$('#special2').on('click', function () {
mySelect.find('option:disabled').prop('disabled', false);
mySelect.selectpicker('refresh');
});

$('#basic2').selectpicker({
liveSearch: true,
maxOptions: 1
});
$("#maxOption2").selectpicker('val',['chicken','turkey','duck']);
});

</script>


其中,$("#maxOption2").selectpicker('val',['chicken','turkey','duck']);为设置多选值!

注意事项:1.此代码需写在页面的加载完成之后触发。

2.在实际用的时候jquery版本用最新的就可以了。我用的3.0

3.实际用的时候如果是动态赋值需要 $("#maxOption2").selectpicker('refresh');刷新。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: