Bootstrap select多选下拉框实现代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap select多选下拉框实现代码相关的知识，希望对你有一定的参考价值。
参考技术A 前言项目中要实现多选，就想到用插件，选择了bootstrap-select。
附上官网api链接，http://silviomoreto.github.io/bootstrap-select/.
没有中文的。对付看吧。有机会每个方法实践一下，会总结的。我自己也等着呢。
需要引用的它们
<!--
Latest
compiled
and
minified
CSS
-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.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-*.min.js"></script>
核心选项
官网有的，期待翻译。。。
核心方法
官网有的，期待翻译。。。
实例应用
bootstrap布局后，select多选代码如下
<div
class="form-group">
<label
class="col-sm-3
control-label">客资类型：</label>
<div
class="col-sm-4">
<select
id="usertype"
name="usertype"
class="selectpicker
show-tick
form-control"
multiple
data-live-search="false">
<option
value="0">苹果</option>
<option
value="1">菠萝</option>
<option
value="2">香蕉</option>
<option
value="3">火龙果</option>
<option
value="4">梨子</option>
<option
value="5">草莓</option>
<option
value="6">哈密瓜</option>
<option
value="7">椰子</option>
<option
value="8">猕猴桃</option>
<option
value="9">桃子</option>
</select>
</div>
</div>
js代码：
$(window).on('load',
function
()
$('#usertype').selectpicker(
'selectedText':
'cat'
);
);
页面效果：
选择后的效果如下：
获取值，
$("#XXX").val()即可
回显操作：
用方法
$('.selectpicker').selectpicker('val',
'Mustard');
Mustard处填入数组。代码如下：
var
str='3,4,5,6';
var
arr=str.split(',');
$('#usertype').selectpicker('val',
arr);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
用jquery实现可输入多选下拉组合框
【写在前面的话】网站上很多用各种插件，比如依赖bootstrap的bootstrap-select插件等。虽然这些框架可以实现很多功能，但因为在实际项目中，可能只会用到其中的某个功能，若是一概引入，会导致整个js加载过于笨重。比如前面提到的bootstrap-select插件，在不压缩的情况下，达到300多k。因此，为了实现一个可填写的下拉框有点得不偿失。
基于这种原因，于是私下用jquery写了一个比较简单的多选下拉可填写组合框。
CSS Code:
1 container{ 2 margin: 20px auto; 3 padding:0 15px; 4 width: 50%; 5 height:300px; 6 box-sizing: border-box; 7 } 8 .text-container{ 9 display: inline-block; 10 float:left; 11 width: 15%; 12 height: 32px; 13 line-height: 32px; 14 box-sizing: border-box; 15 } 16 .selectContainer{ 17 width: 70%; 18 height:200px; 19 float:left; 20 position: relative; 21 padding:0; 22 margin:0; 23 box-sizing: border-box; 24 } 25 .selectedContent{ 26 width:85%; 27 height: 25px; 28 float:left; 29 } 30 .dropDown-toggle{ 31 width:14%; 32 height:31px; 33 line-height: 31px; 34 text-align: center; 35 border: 1px solid silver; 36 border-left:none; 37 float:left; 38 padding:0; 39 margin:0; 40 box-sizing: border-box; 41 cursor: pointer; 42 } 43 .dropDown-menu{ 44 margin:0; 45 padding:0 15px 10px; 46 width:100%; 47 border:1px solid silver; 48 border-top: none; 49 box-sizing: border-box; 50 list-style: none; 51 position: absolute; 52 top:31px; 53 right:0; 54 } 55 .items{ 56 margin-top:8px; 57 padding: 2px; 58 cursor: pointer; 59 } 60 .items:hover{ 61 background: #ddd; 62 } 63 .isSelectedText{ 64 display: inline-block; 65 width:90%; 66 } 67 .dsn{ 68 display: none; 69 } 70
HTML Code:
1 <div class="container"> 2 <span class="text-container">最爱的水果</span> 3 <div class="multipleSelect selectContainer"> 4 <input type="text" class="selectedContent"> 5 <div class="dropDown-toggle">选择</div> 6 <ul class="dropDown-menu dsn"> 7 <li class="items"> 8 <span class="isSelectedText">苹果</span> 9 <span class="isSelected"><input type="checkbox"></span> 10 </li> 11 <li class="items"> 12 <span class="isSelectedText">梨</span> 13 <span class="isSelected"><input type="checkbox"></span> 14 </li> 15 <li class="items"> 16 <span class="isSelectedText">橘子</span> 17 <span class="isSelected"><input type="checkbox"></span> 18 </li> 19 <li style="text-align: right"> 20 <button type="button" class="confirmSelect">确定</button> 21 </li> 22 </ul> 23 </div> 24 </div>
JavaScript Code:
1 $(‘.isSelected input[type=checkbox]‘).on(‘click‘, function(){ 2 var selectedItems = $(this).parents(‘.dropDown-menu‘).prevAll(‘.selectedContent‘).val().split(‘ ‘); 3 var thisItem = $(this).parent().prev().text(); 4 var isExisted = 0; 5 var isChecked = $(this).is(‘:checked‘); 6 if(isChecked){ 7 selectedItems.map(function(item, index){ 8 if(item === thisItem){ 9 isExisted++ 10 } 11 }); 12 if(!isExisted){ 13 selectedItems.push(thisItem) 14 } 15 } 16 else{ 17 selectedItems.map(function(item, index){ 18 if(item === thisItem){ 19 selectedItems.splice(index, 1); 20 } 21 }); 22 } 23 $(this).parents(‘.dropDown-menu‘).prevAll(‘.selectedContent‘).val(selectedItems.join(‘ ‘)); 24 }) 25 $(‘.confirmSelect‘).on(‘click‘, function(){ 26 $(this).parents(‘.dropDown-menu‘).addClass(‘dsn‘); 27 }) 28 $(‘.dropDown-toggle‘).on(‘click‘, function(){ 29 $(this).next().toggleClass(‘dsn‘) 30 });
由于本组件中使用了数组的map方法，可能此方法在ie中不能兼容。由于鄙人电脑ie无法打开，用360浏览器测试后同样可是正常使用。
请大家多多指教。
以上是关于Bootstrap select多选下拉框实现代码的主要内容，如果未能解决你的问题，请参考以下文章