boostrap多选
程序员文章站
2022-03-04 17:20:45
...
bootstrap插件：bootstrap-multiselect
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap 多选</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-multiselect.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-multiselect.js"></script>
<style type="text/css">
.multiselect-container{ /*下拉框的样式*/
width:195px;
}
.multiselect-container>li>a>label{
line-height: 28px;
font-size: 12px;
}
.multiselect-container>li>a>label>input[type='checkbox'] {
margin-top: 7px;
}
.multiselect-item.multiselect-all.active{
border-bottom:1px solid #ccc !important;
}
/* .multiselect-container.dropdown-menu li{
width:49%;
display: inline-block;
}
.multiselect-container.dropdown-menu li:first-child{
width:100%;
} */
.multiselect.dropdown-toggle.btn.btn-default:link,.multiselect.dropdown-toggle.btn.btn-default:visited,.multiselect.dropdown-toggle.btn.btn-default:focus,.multiselect.dropdown-toggle.btn.btn-default:hover,.multiselect.dropdown-toggle.btn.btn-default:active, .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default{
background: #fff;
outline: none;
border:1px solid #ccc;
box-shadow: none;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
background: #474752;
}
.multiselect-selected-text{
font-size:13px;
font-family: '微软雅黑','宋体';
width:100%;
float: left;
text-align: left;
}
.btn.btn-default{
padding-right:15px;
}
</style>
<script type="text/javascript">
function addOption(){
var data=[{value:'1',label:'一室一厅',selected:true},{value:'2',label:'两室一套'}];
$("select[name='companyId']").multiselect('dataprovider',data);
}
function getValues(){
var selectValueStr = [];
$("#companyId option:selected").each(function () {
selectValueStr.push($(this).val());
});
alert(selectValueStr.join(','));
}
</script>
</head>
<body>
<div style="width: 100%; margin:20px">
<select multiple="multiple" id="companyId" name="companyId" class="companyId" style="width:100%; ">
</select>
</div>
<script type="text/javascript">
$("#companyId").multiselect({
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
enableCollapsibleOptGroups: true,
buttonWidth:195,
includeSelectAllOption: false,
selectAllText: '全选',//全选的checkbox名称
selectAllNumber: false,//true显示allselect（6）
selectAllName: 'select-all-name',
selectAllValue: 'select-all-value',//可以为strig或者数字
selectAllJustVisible:false,
onDropdownShow: function (event) {
addOption();
}
});
</script>
<button type="button" class="btn btn-default" onclick="getValues()">提交</button>
</body>
</html>
上一篇： 白芸豆吃多了会怎么样
下一篇： as android 打包