`

boostrap多选

bootstrap 
阅读更多

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>
分享到：
| bootstrap网格布局
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics