BootStrap的select2既可以查询又可以输入的实现代码

首先关键一句话：

$(".js-example-tags").select2({
     tags: true
    })

别小看此代码功能可谓强大，在需要的地方直接加进去class如下代码所示：

<div class="form-group required">
    <label class="control-label col-sm-4">测试select2: </label>
    <div class="col-sm-8">
    <form:select path="sett"
    id="sett" class="form-control required js-example-tags"
    onchange="onchange('${sett.costAmount}','${sett.id}');">
   <form:option value='' label='请选择' />"
    <form:options items="${fns:findSettList()}"
    itemLabel="label" itemValue="value" htmlEscape="false" />
    </form:select>
    </div>
  </div>

注意上面代码有一个onchange方法需把

$(".js-example-tags").select2({
     tags: true
    })

加到此方法里面。不然无法实现。

以上所述是小编给大家介绍的BootStrap的select2既可以查询又可以输入的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap模态框和select2合用时input无法获取焦点的解决方法

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1"  删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myMod

  • BootStrap select2 动态改变值的方法

    1,selec2动态赋值 var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" }); $("#e_pid").attr("value", tempP); $("#e_pid").select2({ placeholder: "查找停车场名称(多选)", language: "zh-CN", minimumInp

  • JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解

    在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部

  • bootstrap模态框远程示例代码分享

    本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • 基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

    基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用

    在上篇基于BootStrap Metronic开发框架经验小结[二]列表分页处理和插件JSTree的使用,介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://

  • 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

    js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide

  • JS组件Bootstrap Select2使用方法解析

    JS组件Bootstrap Select2使用方法解析

    本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下 效果图: 无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及: {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/select2.min.css') }} {{ stylesheet_link('css/font-

  • BootStrap的select2既可以查询又可以输入的实现代码

    首先关键一句话: $(".js-example-tags").select2({ tags: true }) 别小看此代码功能可谓强大,在需要的地方直接加进去class如下代码所示: <div class="form-group required"> <label class="control-label col-sm-4">测试select2: </label> <div class="col

  • BootStrap与Select2使用小结

    BootStrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.github.io/examples.html .http://select2.github.io/select2/ 2.Select2参数文档说明:https://select2.github.io/options.html 3.Select2源码:https://github.com/select2/s

  • bootstrap select2 动态从后台Ajax动态获取数据的代码

    效果图展示: 实现方式: 前端代码: <div class="form-group"> <label class="font-noraml">动态多选</label> <select id="bsselect2ID" name="bsselect2ID" class="form-control select2-multiple" type="text&qu

  • Bootstrap Table 搜索框和查询功能

    1..知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量 /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询匹配对象 var $button = $('<div class="columns pull-right search-button"><button class="btn

  • Mybatis查询记录条数的实例代码

    这几天在学SSM框架,今天在SSM框架中根据某个条件查询MySQL数据库中的记录条数,碰到一些问题,记录一下 User.xml <select id="userNameValidate" parameterType="String" resultType="Integer"> select count(*) from user where username like #{value} </select> <selec

  • bootstrap 下拉多选框进行多选传值问题代码分析

    bootstrap 下拉多选框进行多选传值问题代码分析

    项目开发遇到个问题,就是引入bootstrap下拉多选框进行多选的时候,用form表单提交到后台,获取不到多选的值,只能获取的选择的第一个值. 纠结了会. jsp页面需要引入这东东~ <link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" > <script

  • BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

    BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

    在某些情况下,反馈图标未正确显示.默认情况下,Bootstrap定义反馈图标位置如下: .has-feedback .form-control-feedback { top: 25px; right: 0; } .form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; } 通过自定义值top和right属性,您可以将反馈图标调整为应有的位置. 按钮组 .btn-group .form-control-

  • 看看“疫苗查询”小程序有温度的代码

    近日,一篇<疫苗之王>刷爆了朋友圈,疫苗的安全问题被推到了风口浪尖,腾讯安全反诈骗实验室团队推出了"腾讯安心计划"小程序,方便用户便捷地查询疫苗安全信息. 这样一个暖心的小程序是怎样做出来的? "腾讯安心计划"小程序分为三个主要服务:小程序前端.TARS代理服务.TARS后台服务. 1.小程序前端负责接收用户查询请求及反馈结果: 它的页面中实现了一个查询框,并且将查询框内输入的内容组成get请求发往接口URL. 2.代理服务负责解析HTTP请求,并将其转

  • jQuery zTree搜索-关键字查询 递归无限层功能实现代码

     唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句"找不到是不可能的啊,肯定有很多人早做了无数了,找不到我给你写还请你恰午饭",然而我也去找了很久也没有找到(泪崩,我的计划,我的午饭~).绝大多数都是用的API里面的getNodesByParamFuzzy()或者高亮之类的.然而朋友表示需求不符合:1. 匹配失败父节点也隐藏:2.能自定义匹配规则,即

  • git log根据特定条件查询日志并统计修改的代码行数

    前言 随着年龄的增长和知识的积累,最近常常有种豁然开朗的感觉,或者对一个已经存在的事物突然有了新的认识,比如统计这个词很早就接触了,从没考虑过它是什么意思,而这篇总结的题目中用了统计一词,第一感觉应该是汇总.记录的意思,后来去查了词条定义,也确实就是类似的解释,从没有刻意去学这个词的含义,但是在每天的生活中已经潜移默化地归纳.总结出来了. 想要统计就得有数据源,而 git log 命令恰恰就能提供这个数据源,git log 本身就是一个显示日志的命令,日志记录的是代码库变化的数据,类似于描述代码

随机推荐