chosen.jquery.js

http://baifjece.blog.163.com/blog/static/33794654201286102519119/

------------------首次加载设置默认选中项---------

给select标签的option 设置selected即可

Chosen—强大的jquery模拟选择框插件

2012-09-06 10:25:19|  分类： JQuery |  标签：chosen  jquery  模拟选择  |举报|字号 订阅

很久没写jquery相关的内容了。今天明河向大家推荐个相当不错的模拟选择框插件：Chosen。Chosen提供了suggest功能，强大的是实现了选项分组和多选关键词处理。


如何使用？

引入jquery库和脚本
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
  2. <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
选择框html片段
  1. <select class="chzn-select" data-placeholder="Choose a Country" style="width:350px;"tabindex="1">
  2. <option value=""></option>
  3. <option value="United States">United States</option>
  4. <option value="United Kingdom">United Kingdom</option>
  5. <option value="Afghanistan">Afghanistan</option>
  6. <option value="Albania">Albania</option>
  7. ...
  8. </select>
初始化组件
  1. $(".chzn-select").chosen();

就这么简单。

Chosen使用技巧

如何设置模拟选择框的默认文本？
设置data-placeholder=”"，即可。
如果不存在data-placeholder，组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本？

  1. $(".chzn-select").chosen({no_results_text: "没有匹配结果"});

如何给选项分组？
在html中增加optgroup标签。

  1. <select data-placeholder="Your Favorite Football Teams" style="width:350px;" class="chzn-select" multiple tabindex="6">
  2. <option value=""></option>
  3. <optgroup label="NFC EAST">
  4. <option>Dallas Cowboys</option>
  5. <option>New York Giants</option>
  6. <option>Philadelphia Eagles</option>
  7. <option>Washington Redskins</option>
  8. <optgroup>
  9. <optgroup label="NFC NORTH">
  10. <option>Chicago Bears</option>
  11. <option>Detroit Lions</option>
  12. <option>Green Bay Packers</option>
  13. <option>Minnesota Vikings</option>
  14. </optgroup>
  15. </select>

如何开启多选支持？
增加个多选属性multiple
<select data-placeholder="Choose a Country" class="chzn-select" multiple style="width:350px;"tabindex="4">

  1. <option value=""></option>
  2. <option value="United States">United States</option>
  3. <option value="United Kingdom">United Kingdom</option>
  4. <option value="Afghanistan">Afghanistan</option>
  5. <option value="Albania">Albania</option>
  6. <option value="Algeria">Algeria</option>
  7. </select>

来源：http://www.36ria.com/4976

时间： 2024-12-29 11:15:10

chosen.jquery.js的相关文章

chosen.jquery.js 使用笔记

using chosen.jquery.js using chosen.jquery.css html: <label for="MeetingUsersList" class="label"><strong class="fg-red">∗</strong> 参会人员</label> <select data-placeholder="请选择参会人员..." id=&qu

JQuery 插件 chosen.jquery.min.js

导入的文件 chosen.css. chosen.jquery.min.js.jquery.js html: <select class="chosen-select" id="form-field-select" data-placeholder="Choose a State..."> </select> js代码:  $("#form-field-select").html(data);    

jquery.js:8672 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user&#39;s experience. For more help, check https://xhr.spec.whatwg.org/.

html5谷歌流浪器报错:jquery.js:8672 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. 解决方法: 所有的a标签加上:javascript:void(0) <a href="

检测jQuery.js是否已加载的判断代码

转载自http://www.jb51.net/article/27185.htm 测类.方法.变量或属性是否已存在,这是Javascript编程基础知识.在这里我们就是要检测jQuery()或$()函数是否存在 当然,该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法: 方法1: 复制代码代码如下: if (jQuery) { // jQuery

jquery.js和jquery.min.js的区别介绍

jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js 文件名不一定完全相同,但通常情况下: jquery.js是完整的未压缩的jQuery库,文件比较大,一般用于阅读学习源码或修改源码,一般不用于线上项目. jquery.min.js是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符.注释.空行等与逻辑无关的内容删除,并进行一些优化.这个版本一般用于网站引用使用,减小文件体积,降低网站流量,提升访问速度等.

jquery&amp;js $(this) &amp; this

序言:在使用jquery操作js时,经常整不明白this与$(this).抽空仔细测试了一把,记录下来以供在忘记的时候拉出来参考参考! $(this)生成的是什么 $()生成的是什么呢?实际上$()=jquery(),那么也就是说返回的是一个jquery的对象. 题外话:通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context,可以指定context为一个dom元素集或者jquery对象

Jquery/js submit()无法提交问题

有朋友可能会直接利用js或jquery来提交数据而不是使用表单直接提交了,小编来给大家介绍小编碰到的一个问题就是 submit()无法提交,下面我们来看解决办法与原因分析. jquery无法提交  代码如下 复制代码 <form action="register.php" method="post"> <label>邮箱:</label> <input type="text" class="lo

JS文件中加载jquery.js

原文链接:http://blog.csdn.net/whatday/article/details/39553451 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他JS文件的引入 2.这个JS文件中 还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中 这些代码用到了jQuery相关的东东 所以这里第一个需要解决的就是怎么引入jquery.js 在网上搜索了很多方法都不太实用,由于我自己离开WEB多年 最后向朋友询问得到以下代码 1.js [javasc

What&#39;s the difference between jquery.js and jquery.min.js?

They are both the same functionally but the .min one has all unnecessary characters removed in order to make the file size smaller. Just to point out as well, you are better using the minified version (.min) for your live environment as Google are no