实现多选下拉框功能

该功能基于Bootstrap-select来实现

需要引入以下几个文件:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <link href="https://cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

代码实现

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap-select实现多选下拉框</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="form-group">
    <div class="col-lg-6">
        <select id="classname" class="selectpicker show-tick form-control" multiple>
            <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>
        </select>
    </div>
    <button class="col-lg-1" onclick="getvalue()">获取值</button>
    <button class="col-lg-1" onclick="indexs()">回显</button>
    <button class="col-lg-1" onclick="selectall()">全选</button>
    <button class="col-lg-1" onclick="delselectall()">全不选</button>
    <button class="col-lg-1" onclick="backselect()">反选</button>
</div>
<script>
    // 获取值
    function getvalue() {
        console.log($('#classname').val());
    }

    //回显
    function indexs() {
        var str = '1,3,5,6';
        var arr = str.split(',');
        $('#classname').selectpicker('val', arr);
    }

    //全选
    function selectall() {
        var select = document.getElementById("classname");
        var options = select.options;
        var arr = [];
        for (var i = 0; i < options.length; i++){
            arr.push(options[i].value);
        }
        $('#classname').selectpicker('val', arr);
    }

    //全不选
    function delselectall(){
        var arr = [];
        $('#classname').selectpicker('val', arr);
    }

    //反选
    function backselect() {
        //获取选中值
        var arrs = $('#classname').val();
        var select = document.getElementById("classname");
        var options = select.options;
        var arr = [];
        for (var i = 0; i < options.length; i++){
            arr.push(options[i].value);
        }
        //如果选中的值为空,则直接全选
        if (arrs===null){
            $('#classname').selectpicker('val', arr);
        }else{
            var result_arr = getArrDifference(arrs,arr);
            $('#classname').selectpicker('val', result_arr);
        }
    }

    //求出两个数组不同的值
    function getArrDifference(arr1, arr2) {
        return arr1.concat(arr2).filter(function(v, i, arr) {
            return arr.indexOf(v) === arr.lastIndexOf(v);
        });
    }
</script>
</body>

</html>

效果展示

在这里插入图片描述

扩展

在这里插入图片描述
默认的下拉框会有Nothing selected

  • 方法一:

在js中增加:

    $(function() {
        $(".selectpicker").selectpicker({
            noneSelectedText: '请选择患者' //默认显示内容  
        });
    });

在这里插入图片描述

  • 方法二:

直接给select标签增加 title属性。

©️2020 CSDN 皮肤主题: 酷酷鲨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值