bootstrap-select实现下拉框多选效果

在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看

操作方法

  • 01

    最终实现的效果:

  • 02

    HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-sm-1 col-sm-offset-1 control-label" >分类: </label> <div class= "col-sm-4"> <select class= "form-control selectpicker" multiple> <option> 请选择</option > <option> 游记</option > <option> 景点</option > <option> 东京</option > <option> 日本</option > <option> 香港</option > <option> 加拿大</option > </select> </div> <label for= "scene_title" class="col-sm-1 control-label" >主题游: </label> <div class= "col-sm-4"> <select class= "form-control selectpicker" multiple> <option> 请选择</option > <option> 游船</option > <option> 漂流避暑</option > <option> 博物馆</option > <option> 影视基地</option > <option> 名胜古迹</option > <option> 海岛度假</option > </select> </div> <!--                         <div class="col-sm-10"> --> <%--                              <form:checkboxes path="sceneTypeRelations" items="${sceneTypeMap}" /> --%> <!--                         </div> --> </div> </div>

  • 03

    js代码: define(function(require, exports, module) { var $ = require( "jquery"); require( "jquery-validation/1.11.1/jquery.validate.min.js" ); require( "jquery-validation/1.11.1/messages_bs_zh.js" ); require( "bootstrap/select/bootstrap-select.min.css" ) require( "bootstrap/select/bootstrap-select.min.js" ) $(document).ready( function() { // 聚焦第一个输入框 $( "input[name=name]").focus(); // 为inputForm注册validate函数 $( "#sceneModel").validate(); var lon = $("input[name=longitude]" ).val(); if (lon == "," ) { $( "input[name=longitude]").val("" ); } jQuery( '.selectpicker').selectpicker({ liveSearch: true, size:8 }); }); module.exports = $; });

(0)

相关推荐

  • 如何使select2插件下拉框多选并获取选中的值

    select2是jQuery的一个下拉框插件,有单选.多选.搜索.禁用等功能.下面利用一个实例来说明select2多选框的使用方法,并获取选中的值,具体操作如下: 操作方法 01 第一步,创建静态页面 ...

  • axure下拉框光标闪动效果怎么制作?

    Axure下拉框怎么添加光标闪烁的效果?只要插入鼠标交互时间就可以了,请看下文详细介绍. 1.新建“标签”和“下拉框”,下拉框的选项编辑,放4个选项:“光标闪烁效果范例”.“------------- ...

  • select下拉框设置不修改;select不可点击

    在开发过程中,有时候需要设置select下拉框为不可点击,如何设置select下拉框不可编辑呢? 可以通过在select标签上添加一个disabled="disabled". 代码 ...

  • Html下拉框Select联动实例

    在开发网站时,经常会有二个或多个select下拉框联动的情况,比如省份和城市二个下拉框联动,在省份下拉框里选择不同的省,第二个下拉框城市就要对应该省份下的城市数据. 下面一起来看下,怎么用Javasc ...

  • 使用Jquery如何操作下拉框控件?

    下拉框选择控件,在网页开发中,是经常使用到的一个控件.所以会对它有很频繁的操作,借助Jquery,我们可以很方便地对它进行操作控制. 下面一起来看些例子. 操作方法 01 先看下我们的例子HTML代码 ...

  • Axure RP 8怎么制作按钮控制下拉框选项?

    Axure RP 8怎么制作按钮控制下拉框选项? 1.打开Axure RP 8软件,在软件库中找到下拉框元件,拖一个到画布上,如下图所示: 2.再次在元件库中找到"主要按钮",拖一 ...

  • Axure RP 8如何制作按钮控制下拉框选项

    Axure RP 8如何制作按钮控制下拉框选项

  • Axure RP 8下拉框怎么控制文本框标题字体?

    Axure RP 8设计软件原型工具中的下拉框,可以展示多个值,在切换选项时,改变文本框和标题.下面利用一个实例说明这个背景,操作如下: 1.双击打开Axure RP 8设计软件,在表单元件中拖曳一个 ...

  • 如何使用按钮控制下拉框的添加和删除

    动态控制下拉框select每一项option节点的添加与删除 操作方法 01 第一步,我们先把静态页面做出来,静态页面上就放一个下拉框<select></select>,并且在 ...