精华内容
下载资源
问答
  • bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能,多选功能,搜索功能,自定义内容和图标等多种功能,非常强大。
  • 今天小编就为大家分享一篇bootstrap下拉框动态赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • bootstrap下拉框

    2016-09-30 15:44:04
    参考:http://www.internetke.com/jsEffects/2016020103/
    参考:http://www.internetke.com/jsEffects/2016020103/
    
    展开全文
  • 主要为大家详细介绍了基于Bootstrap下拉框插件bootstrap-select的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • bootstrap下拉框实现

    2019-07-04 14:36:27
    bootstrap下拉框实现 后台代码 List<DataDictItem> rvorderTypeLists = dataDictService.selectTypeByDatakey(RVORDERTYPE); model.addAttribute("rvorderTypeList", rvorderTypeLists); retur...

    bootstrap下拉框实现

    后台代码

            List<DataDictItem> rvorderTypeLists = dataDictService.selectTypeByDatakey(RVORDERTYPE);
            model.addAttribute("rvorderTypeList", rvorderTypeLists);
            return "页面";
    

    前台代码

           <select class="form-control customSelect" title="" id="orderState">
                 <option value="">--全部--</option>
                 <c:forEach items="${orderStateList}" var="orderStateList">
                 		 <option value="${orderStateList.value }">${orderStateList.name }</option>
                 </c:forEach>
           </select>
    
    展开全文
  • BootStrap下拉框使用

    2018-04-27 09:42:18
    BootStrap下拉框使用,有Controller的代码,使用动态绑定的下拉框
  • BootStrap下拉框在firefox浏览器界面很不友好,在firefix浏览器打开链接就会发现里面有个小容器,怎么处理呢,下面看下小编给大家分享的有关这个问题的处理方案
  • Bootstrap 下拉框带搜索组件

    千次阅读 2019-04-18 15:14:51
    Bootstrap 下拉框带搜索组件 html代码 data-live-search=“true” 属性必加 <div class="row form-group"> <div class="col-lg-2"></div> <div class="form-group col-lg-8" > <label...

    Bootstrap 下拉框带搜索组件

    html代码
    data-live-search=“true” 属性必加

    <div class="row form-group">
        <div class="col-lg-2"></div>
        <div class="form-group col-lg-8" >
            <label class="input-group">
                <span class="input-group-addon">用户名称:</span>
                <select class="col-lg-6 form-control"  id="userName" name="name"
                        data-live-search="true">
                </select>
            </label>
        </div>
    </div>
    

    js代码

     $(function () {
     		//初始化select
            $("#userName").selectpicker({
                'selectedText': 'cat'
            });
        })
    

    查询出所有用户绑定到select下的option

        $.ajax({
            url:'/system/user/listUser.json',
            type:'get',
            dataType:'json',
            success:function(d){
                if(d.state=="success"){
                    var html ="";
                    $.each(d.date,function (i,v) {
                        html+='<option value='+v.id+'>'+v.chineseName+'</option>'
                    })
                    $("#smsUserForm [name=name]").html(html);
                    //重新加载一遍select
                    $("#smsUserForm [name=name]").selectpicker('refresh');
                    
                }
            }
        })
    

    运行效果:

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • BootStrap 下拉框多选

    2018-09-25 14:47:49
    只需要设置select选项框的属性multiple即可实现多选功能
  • Bootstrap下拉框控件

    2020-08-19 16:29:50
    Bootstrap Select:下拉框控件 官网地址:http://silviomoreto.github.io/bootstrap-select/. 现在在做一个下拉框选择的功能,找了一些资料不是很满意,最后找到这篇博客,为了方便后续学习,再次记录一下 内容摘自...

    Bootstrap Select:下拉框控件
    官网地址:http://silviomoreto.github.io/bootstrap-select/.

    现在在做一个下拉框选择的功能,找了一些资料不是很满意,最后找到这篇博客,为了方便后续学习,再次记录一下
    内容摘自:链接: https://blog.csdn.net/gah7788/article/details/55519129.

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bootstrap Select</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet">
    </head>
    <body>
    	<div class="container">
    		<div class="row clearfix">
    			<div class="col-md-12 column">
    				<div class="page-header">
    					<h1>Bootstrap Select <small>下拉框</small></h1>
    				</div>
    				<h3>基本select插件效果</h3>
    				<p>为下拉框添加插件支持 , <span class="label label-success">class="selectpicker"</span></p>
    				<div class="form-group">
    					<select class="selectpicker">
    						<option>A</option>
    						<option>B</option>
    						<option>C</option>
    					</select>
    				</div>
    				
    				<hr>
    				<h3>单选模式示例</h3>
    				<p><span class="label label-success">class="selectpicker show-tick"</span> , 选中项内容后添加" √ "小图标</p>
    				<p><span class="label label-success">title="请选择一项"</span> , 未设置默认选项并未选择时 , 组件框中的提示内容</p>
    				<p><span class="label label-success">data-live-search="true"</span> , 为组件添加查询功能 </p>
    				<p><span class="label label-success">data-size="5"</span> , 设置下拉长度 </p>
    				<div class="form-group">
    					<select class="selectpicker show-tick" title="请选择一项" data-live-search="true" data-size="5">
    						<option>A</option>
    						<option>B</option>
    						<option>C</option>
    						<option>D</option>
    						<option>E</option>
    						<option>B</option>
    						<option>C</option>
    					</select>
    				</div>
     
    				<hr>
    				<h3>多选模式示例</h3>
    				<p><span class="label label-success">title="请选择一项"</span> , 未设置默认选项并未选择时 , 组件框中的提示内容</p>
    				<p><span class="label label-success">data-live-search="true"</span> , 为组件添加查询功能 </p>
    				<p><span class="label label-success">data-size="5"</span> , 设置下拉长度 </p>
    				<p><span class="label label-success">multiple</span> , 添加可多选支持 </p>
    				<p><span class="label label-success">data-max-options="2"</span> , 设置最多可选个数 </p>
    				<p>该属性在设置<span class="label label-success">data-max-options="2"</span>后 , 建议不使用<span class="label label-default">data-actions-box="true"</span> , 该属性是添加"选择所有""全部取消选择"按钮</p>
    				<div class="form-group">
    					<select class="selectpicker" title="请选择一项" data-live-search="true" data-size="5" multiple data-max-options="2">
    						<option>A</option>
    						<option>B</option>
    						<option>C</option>
    						<option>D</option>
    						<option>E</option>
    						<option>B</option>
    						<option>C</option>
    					</select>
    				</div>
    				
    				<hr>
    				<h3>分组选项示例</h3>
    				<p>使用optgroup标签将选项分为一组, 下面介绍optgroup标签属性</p>
    				<p><span class="label label-success">label="分组名"</span> , 为分组添加名称 </p>
    				<p><span class="label label-success">data-subtext="追加内容"</span> , 为分组追加名称 </p>
    				<div class="form-group">
    					<select class="selectpicker" title="请选择" >
    						<optgroup label="AB选项组" data-subtext="ab">
    							<option>A</option>
    						<option>B</option>
    					</optgroup>
    					<optgroup label="CD选项组" data-subtext="ab">
    						<option>C</option>
    						<option>D</option>
    						</optgroup>
    					</select>
    				</div>
    				<h3>选项标签中属性介绍示例1</h3>
    				<p><span class="label label-success">title="代称"</span> , 改变选项在组件框中显示内容, 相当于选项的代称</p>
    				<p><span class="label label-success">selected</span> , 默认选中</p>
    				<p><span class="label label-default">data-icon="图标代码"</span>为选项前面添加小图标, 如果没设置
    					<span class="label label-success">title="代称"</span>属性, 那么小图标随选项内容一起显示在组件框中
    				</p>
    				<p><span class="label label-success">data-subtext="提示文字"</span>在选项内容后添加提示(淡灰色小2号字体)文字</p>
    				<div class="form-group">
    					<select class="selectpicker" >
    						<option title="A类型" data-icon="fa fa-file" data-subtext="a项" >A类型选项</option>
    						<option title="B类型" data-icon="fa fa-file" selected>B类型选项</option>
    						<option title="C类型" data-icon="fa fa-file">C类型选项</option>
    					</select>
    				</div>
    				<h3>选项标签中属性介绍示例2</h3>
    				<p><span class="label label-default">data-content="html代码"</span> , 使用该属性中的代码片段替换该选项的内容, 以及选中后在组件框中显示的也是该html代码</p>
    				<p>如果感觉显示在组件代码框中的内容不好 , 使用<span class="label label-success">title="代称"</span> , 改变选项在组件框中显示内容, 相当于选项的代称</p>
    				<div class="form-group">
    					<select class="selectpicker" >
    						<option data-content="<span class='label label-success'>A选项</span>">A选项</option>
    						<option data-content="<span class='label label-success'>B选项</span>">B选项</option>
    						<option data-content="<span class='label label-success'>C选项</span>">C选项</option>
    					</select>
    				</div>
    				
    				<hr>
    				<h3>其他属性介绍</h3>
    				<p><span class="label label-success">disabled</span> , 该属性设置在组件select标签中为禁用组件 ; 设置在分组标签(optgroup)中禁选该组 ; 设置在选项标签(option)中禁选该项。</p>
    				<p><span class="label label-default">data-divider="true"</span> , 在选项与下一选项中间添加分割线。</p>
    				<hr>
    				<h3>Core options(核心选项)</h3>
    				<p>核心选项也就是一些属性,重要的属性已经在上面介绍完了</p>
    				<p>写法:data-选项名称:对应值,组合成属性</p>
    				
    				<hr>
    				<h3>核心方法</h3>
    				<p>$('#selectID').selectpicker('selectAll'); // 当为多选下拉框时 ,执行全部选中</p>
    				<p>$('#selectID').selectpicker('deselectAll'); // 当为多选下拉框时 ,执行全部取消选中</p>
    				<p>$('#selectID').selectpicker('refresh'); // 当你删除或者添加选项时 ,刷新代码</p>
    				<p>$('#selectID').selectpicker('hide'); // 隐藏下拉框</p>
    				<p>$('#selectID').selectpicker('show'); // 显示下拉框</p>
    				
    				<hr>
    				<h3>核心事件</h3>
    				<p>$('#selectID').on('show.bs.select', function (e) {}); // 当点击下拉框时,选项项窗体即将显示触发</p>
    				<p>$('#selectID').on('shown.bs.select', function (e) {}); // 当点击下拉框时,选项项窗体显示触发</p>
    				<p>$('#selectID').on('hide.bs.select', function (e) {}); // 当点击下拉框时,选项项窗体即将隐藏触发</p>
    				<p>$('#selectID').on('hidden.bs.select', function (e) {}); // 当点击下拉框时,选项项窗体隐藏触发</p>
    				<p>$('#selectID').on('loaded.bs.select', function (e) {}); // 当下拉框被初始化后触发</p>
    				<p>$('#selectID').on('refreshed.bs.select', function (e) {}); // 当刷新方法(也就是执行该方法.selectpicker('refresh'))下拉框时触发</p>
    				<p>$('#selectID').on('changed.bs.select', function (e) {}); // 当值被改变时触发</p>
    			</div>
    		</div>
    	</div>
    	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    	<script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    	<script src="https://cdn.bootcss.com/bootstrap-select/1.12.4/js/i18n/defaults-zh_CN.min.js"></script>
    	
    </body>
    </html>
    
    

    效果图
    在这里插入图片描述
    在这里插入图片描述
    补充:
    如果想要刷新下拉框必须要同时使用

            $('#id').selectpicker('val','');
    	    $("#id").selectpicker('refresh');
    
    展开全文
  • BootStrap 下拉框插件

    2015-10-02 11:46:23
    最近项目中刚好在用bootstrap,突然发现很多插件都没有,于是就自己动手写了个下拉插件,功能齐全,能满足各种需求。
  • 新建一个DepartmentController控制类,用于部门信息的查询。...import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contro...
  • bootstrap 下拉框制作

    2020-01-28 16:07:35
    bootstrap 4 文档 基本概念: 一个屏幕分成12等份 看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • Bootstrap下拉框事件

    2019-10-10 12:00:40
    Bootstrap提供各种附加到下拉插件的事件,分别是: show.bs.dropdown:当手柄被点击时触发;或下拉手柄收到打开隐藏菜单的请求 shown.bs.dropdown:在菜单显示后触发 hide.bs.dropdown:在关闭菜单之前触发 hidden....
  • 我们在使用bootstrap下拉框组件时,有时会有如下需求,比如,下拉框中有分页的需求,如果你点击翻页时那下拉框会自动关闭,再打开下拉框又会重新刷新,这肯定是不满足条件的。所以就会有点击后不关闭的需求。这种...
  • bootstrap下拉框组件

    2019-02-14 18:47:00
    要使用bootstrap的selectpicker下拉列表必须引入css和js: <!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-...
  • 首先检查jquery和...如果已经引入,下拉框仍然没有反应,那么你大概率是把jquery和bootstrap的引入顺序整反了 正确的引入方式,先引入jquery,再引入bootstrap 否则会出现下面的错误: 提示需要JQuery支持 ...
  • bootstrap下拉框 搜索

    2018-03-28 16:47:04
    &lt;div class="form-group"&gt; &lt;label class="col-sm-3 control-label"&gt;负责人:&lt;/label&gt; &lt;div class="col...
  • bootstrap下拉框——bootstrap-select

    千次阅读 2018-03-07 18:04:00
    使用示例 1、基础示例 ...既然是bootstrap-select,组件肯定依赖bootstrap的,而bootstrap又依赖jquery的,所以使用组件必须引用以下文件 &lt;link rel="stylesheet" href="...
  • BootStrap 下拉框的显示

    2018-11-24 15:49:36
    //下面的方法需要后台返回一个Map数组  function showLevelSelect() { $.ajax({ url : $("#contextPath").val() + "/sy/dictAction_list.action", type : "... v...
  • 最近的业务需求是把后台数据渲染到前端,其中有一个是复选框数组,前端选择渲染的方式是bootstrap的下拉插件 渲染完成之后,此时会在原有select同级上面生成buton,dropdown-menu 两个块 其中框内显示的内容跟...
  • $(".dropdown-menu li").on("click", function (e) { e.stopPropagation(); }); 停止传播事件 转载于:https://www.cnblogs.com/codeDevotee/p/9914662.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,079
精华内容 431
关键字:

bootstrap下拉框