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

最新推荐文章于 2024-05-15 00:21:36 发布

三思微糖

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量452

点赞数

文章标签： jquery js bootstrap javascript

本文链接：https://blog.csdn.net/qq_34784833/article/details/109442164

版权

效果图（不带搜索框）

在这里插入图片描述

效果图（带搜索框）

在这里插入图片描述

需要引用的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”>

不说了直接上代码

<!DOCTYPE html>
<html>
  <head>
  <title>jQuery bootstrap-select可搜索多选下拉列表插件</title>
  <script src="http://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="http://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);

方法二：

 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里面进行修改。有问题私聊我，大家一起学习。

三思微糖

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
下拉选择框（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-
复制链接

扫一扫