bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看。bootstrapselect是很好用的前端插件首先引入bootstrap和bootstrap-select的css和js下载地址:https://download.csdn.net/download/lianzhang861/10617543<linkrel="stylesheet"h…

h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看。

bootstrap select是很好用的前端插件

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

首先引入bootstrap和bootstrap-select的css和js

下载地址:bootstrap全家桶(datetimepicker,select,table,validator)_bootstrapselect多选-Javascript工具类资源-CSDN下载

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-select.min.css">
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>

html:主要是增加class selectpicker 并添加multiple属性

<select id ="weatherType" name="weatherType" class="form-control selectpicker" multiple="multiple" title="请选择">

</select>

option一般为ajax添加,等拼接完字符串后再初始化一下

js:初始化是为

$("#weatherType").selectpicker('refresh');

这样默认选中第一个

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

如果想默认什么也不选,则:

$("#weatherType").selectpicker('deselectAll');

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

注意,默认不选显示的字样需要在select中设置title属性,不然会显示默认的 英文 nothing selected;

如果上述方法有问题,则可以在拼接字符串的时候第一个拼上空选项,例如:

var layer2=layer.load(2)
        $.ajax({
            type: 'POST',
            url: "${ctx}/system/role/getRoleListWithNoPage",
            dataType: 'json',
            async:true,
            success: function(ret){
                console.log(ret)
                var data=ret.data;
                $("#role_id_fake").empty();
                $("#role_id_fake").append($('<option value="">请选择</option>'));
                for(var i=0;i<data.length;i++){
                    $("#role_id_fake").append($('<option value=' + data[i].roleId + '>' + data[i].roleName + '</option>'));
                }
                $("#role_id_fake").selectpicker('refresh');
                $('.dropdown-toggle').dropdown();
                $("#role_id_fake").trigger("click")

            },
            error:function(data) {
                console.log(data.msg);
            },
            complete:function(){
                layer.close(layer2);
            }
        });

这样的效果也不错 

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾) bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

加上下拉搜索功能:

只需要在属性上加上

data-live-search="true"

加上全选和取消全选按钮:

data-actions-box="true"

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

如:(效果如上图)

<select name="role_id_fake" class="form-control selectpicker" multiple="multiple" 
id="role_id_fake" title="请选择"
                        data-actions-box="true"
                        data-live-search="true">
                    <option value="">请选择</option>
                </select>

多选框的取值

$("#weatherType").val()

直接取值就行,多选的值会自动用逗号分隔开

但如果你提交数据时将表单序列化

var formData = $("#createUserForm").serialize();

则val()只能取到一个选中的值,无法传入多选的值

解决办法:

$("#weatherType").change(function(){
            $("input[name=weatherType1]").val($("#weatherType").val())
    })

在change事件时将值赋给另一个隐藏的input即可

多选框的赋值:

$("#weatherType").selectpicker ("val",weatherType).trigger("change");

其中weatherType为逗号隔开的值得字符串,赋值后展开后自动打勾

如果字符串不生效,则自己处理一个字符串,变成字符串数组,例如:

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

ps:最近出现了点击select不弹出选项问题,可以这么解决

在页面上加一句话:

$("#xxx").selectpicker('refresh');//先初始化selectpicker
$('.dropdown-toggle').dropdown();  //在加上一行这个

ps:这次我又引入了一下,发现对勾图标出不来

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

 在bootstrap.css中可以看到这个:

bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

它默认要引入fonts中的字体,自己改路径或者把fonts放进来即可 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35227.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注