本文摘自PHP中文网,作者爱喝马黛茶的安东尼,侵删。
使用bootstrap-select组件时,先引用下列文件
最后一个文件 defaults-zh_CN.min.js 非必需,是组件中文化的时候才需要引用。
1 2 3 4 5 6 7 | <!-- Latest compiled and minified CSS -->
<link rel= "stylesheet" href="https:
min.css">
<!-- Latest compiled and minified JavaScript -->
<script src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js" ></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js" ></script>
|
使用就更加简单了,不用任何已经js,直接使用class就可以初始化。
Select单选:
如果没有设置选中项,默认选中第一个option。如设置了tiltle属性,则显示title属性内容,不会默认选中。
1 2 3 4 5 6 7 | <select class = "selectpicker" title= "请选择" >
<option value= "1" >广东省</option>
<option value= "2" >广西省</option>
<option value= "3" >福建省</option>
<option value= "4" >湖南省</option>
<option value= "5" >山东省</option>
</select>
|
选项分组
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <select class = "form-control selectpicker" data-live-search= "true" multiple>
<optgroup label= "广东省" >
<option value= "1" >广州市</option>
<option value= "2" >深圳市</option>
<option value= "3" >珠海市</option>
</optgroup>
<optgroup label= "广西" >
<option value= "1" >南宁市</option>
<option value= "2" >柳州</option>
<option value= "3" >桂林市</option>
</optgroup>
<optgroup label= "山东" >
<option value= "1" >烟台</option>
<option value= "2" >青岛</option>
<option value= "3" >济南</option>
</optgroup>
</select>
|
阅读剩余部分
相关阅读 >>
bootstrap.css样式表是什么
bootstrap面板怎么用
easyui和bootstrap的区别
bootstrap如何设置表格单选按钮
bootstrap置信区间如何求
bootstrap命令是什么意思
一般用bootstrap干什么用的
bootstrap怎么设置进度条
bootstrap实现简单侧边导航栏效果
三分钟带你了解bootstrap下拉菜单
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap的下拉多选框如何使用