注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

下拉框内容太多,一个带搜索功能的下拉输入框实现  

2017-10-10 15:47:16|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:http://blog.csdn.net/mingtianhaiyouwo/article/details/50885407

下拉框中的选项太多   需要一个带搜索功能的输入框,类似于下面这个样子:

本例子中用了一个js插件,首先需要引入插件的css和css中用到的图片,再引入插件的js

第一步引入css:

  1. <link href="${resources}/css/bootstrap/select2.css" rel="stylesheet" >  

第二步修改css用到的插件图标:

  1. background: url('../../img/select2.png') right top no-repeat;  
把css中的所有引入的select2.png的图片更换成你本地的路径

第三步导入需要用到的js:

  1. <script type="text/javascript" src="${resources}/js/bootstrap/select2.min.js"></script>  
在导入js插件前先导入需要的jquery组件,类似于这样的:
  1. <script type="text/javascript" src="${resources}/js/bootstrap/custom.js"></script>  
  2. <script type="text/javascript" src="${resources}/js/bootstrap/jquery-migrate-1.2.1.min.js"></script>  
  3. <script type="text/javascript" src="${resources}/js/bootstrap/jquery.tagsinput.min.js"></script>  
  4. <script type="text/javascript" src="${resources}/js/bootstrap/select2.min.js"></script>  
第四步使用插件:

页面代码:页面用的是freemarker构建的

  1. <select name="brandId1" id="brandId1" class="form-control select2">  
  2.     <option value="">请选择</option>  
  3.     <#if brandList?exists> <#list brandList as item>  
  4.         <option value="${item.id}" name="${(item.icon)!''}"> ${item.name}</option>  
  5.     </#list> </#if>  
  6. </select>  
js用的是类选中 select2   js代码:

[javascript] view plain copy
 print?
  1. // Select2  
  2. jQuery(".select2").select2({  
  3.      width: '100%'  
  4. });  
写到这里点击一下你的下拉框是不是和我的一样了呢,不一样的话请留言吧!


页面需要的插件:插件下载地址

  评论这张
 
阅读(38)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017