bootstrap selectpicker 多选

最新推荐文章于 2021-04-22 08:35:54 发布

三省好少年

最新推荐文章于 2021-04-22 08:35:54 发布

阅读量1.4k

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_42718414/article/details/106825380

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本篇简短介绍一下bootstrap的selectpicker多选框

<div class="form-group">
     <label for="" class="col-sm-2 control-label">测试多选:</label>
     <div class="col-sm-4">
       <select multiple class="selectpicker form-control" id="ceshi" title="请选择" 
             autocomplete="off"> 
           <!--手动赋值 -->
           <option value="1">选择一</option>
           <option value="2">选择二</option>
           <option value="3">选择三</option>
       </select>                       
      </div>  
</div>

<script>

     $('.selectpicker').selectpicker('val',''); //设置指定value
     $('.selectpicker').selectpicker('refresh','');//刷新

    //动态给页面赋值
    $.ajax({
        type: "POST",
        url:url,
        dataType:'json',
        success:function(data){			 
        var html = $('#from #ceshi');	
            for(var i=0;i<data.length; i++){
               html.append("<option value='"+data[i]['DATA_VALUE']+"'>"
                      +data[i]['DATA_VALUE']+"</option>");
		           }
	             }
                }); 
</script>

引用完bootstra样式等只需在页面class中加上 selectpicker

业务需要多选，所有就在select标签中加上multiple

初始多选框若不须赋值就加上 title="请选择" 可以了，不然会显示 "没有选中任何项" 。

效果如下：