时间:2021-05-28
在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看
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>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 = $;});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
利用BootstrapMultiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值首先展示项目案例:多选下拉框功能实现.gi
近期由于工作需要,用户点击下拉框可以试下多选的效果,效果大致如下图:实现的代码如下:1234567最主要的是:multiple:true表示下拉框可以多选,如果
本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下1.第一个下拉框代码请选择数据资源${entity.alias!}$
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局。我们期望的效果是,下拉框只显示一行的值
一、开发小要点web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大