首页 > 代码库 > chosen.jquery.js

chosen.jquery.js

2024-07-24 07:32:31   217人阅读

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功能，强大的是实现了选项分组和多选关键词处理。


  • 点此查看demo
    •  
  • 点此下载

如何使用？

引入jquery库和脚本
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
  2. <script src="http://www.mamicode.com/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="http://www.mamicode.com/United States">United States</option> 
  4.                 <option value="http://www.mamicode.com/United Kingdom">United Kingdom</option> 
  5.                 <option value="http://www.mamicode.com/Afghanistan">Afghanistan</option> 
  6.                 <option value="http://www.mamicode.com/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.  
  5.                   <option>Dallas Cowboys</option>
  6.                   <option>New York Giants</option>
  7.                   <option>Philadelphia Eagles</option>
  8.                   <option>Washington Redskins</option>
  9.                 <optgroup>
  10.                 <optgroup label="NFC NORTH">
  11.                   <option>Chicago Bears</option>
  12.  
  13.                   <option>Detroit Lions</option>
  14.                   <option>Green Bay Packers</option>
  15.                   <option>Minnesota Vikings</option>
  16.                 </optgroup>
  17. </select>

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

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

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

chosen.jquery.js


联系
我们