下拉选择框（bootstrap-select 多选）


效果图 （不带搜索框）

在这里插入图片描述

效果图 （带搜索框）

在这里插入图片描述

需要引用的js

< script language=“javascript” src="…/…/js/bootstrap-select.js">< /script>
< script language=“javascript” src="./…/js/bootstrap-select.min.js">< /script>

需要引用的css

< link href="…/…/css/bootstrap-select.min.css" type=“text/css” rel=“stylesheet”>
< link href="…/…/css/bootstrap-select.css" type=“text/css” rel=“stylesheet”>

不说了直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
  <head>
  <title>jQuery bootstrap-select可搜索多选下拉列表插件</title>
  <script src="//i2.wp.com/www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="bootstrap-select.js"></script>
  <link rel="stylesheet" type="text/css" href="bootstrap-select.css">
  <!-- 3.0 -->
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="//i2.wp.com/libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script type="text/javascript">
        $(window).on('load', function () {<!-- -->    
        $('.selectpicker').selectpicker({<!-- -->
            'selectedText': 'cat'
             });
         });
    </script>  
  </head>
  <body>
    <label for="id_select"></label>
    <select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="false">
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
    <option selected>选项四</option>
    <option>选项五</option>
    </optgroup>
  </select>
</div>
</body>
</html>
<!--注意：multiple  不可缺少
    label for 和 select 的 id 要相同
-->

获取选项的值

$("#id").val(); //传入后台

打开搜索框

data-live-search=“true” true：打开 false：关闭

回显数据

方法一：$(’.selectpicker’).selectpicker(‘val’, Mustard);
方法二：
1
2
3
4
5
6
7
8
9
10
11
12
13
 if ((list != null) && (!list .isEmpty())) {<!-- -->
      int iLength = list .size();
      for (int i = 0; i < iLength; i++) {<!-- -->
          String strValue = list.get(i).toString();
          if (str_sxqz10.contains(strValue)){<!-- -->
             out.println("<option value='" + strValue + "' selected='true'>" + strValue + "</option>");
             } else {<!-- -->
             out.println("<option value='" + strValue + "'>" + strValue + "</option>");
             }
          }
            out.println("</optgroup>");
     }
    <!--思路：获取此字段的所有选项和自己保存的数据进行对比。然后进行赋值-->

提示

选择框默认的有选项 可以再js里面进行修改。有问题私聊我，大家一起学习。