[置顶] [jQueryUI]-Chosen：select下拉选择框美化插件及问题

Chosen 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的临高网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

先来看下插件的效果：

[置顶] [jQueryUI] - Chosen：select下拉选择框美化插件及问题

跟这个比起来，原来的select样式是不是弱爆了！

马上来武装我们的select吧：

1、先把js和css文件引用到网页里面去：

  ?
        <link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.1.4.4.min.js">script>
  <script type="text/javascript" src="js/jqueryUI/chosen/chosen.jquery.js">script>
    
  

2、创建一个select元素，如下：

  ?
        <select name="dept" style="width:   150px;" id="dept" class="dept_select"> 
      <option value="部门1">部门1option>
      <option value="部门2">部门2option>
      <option value="部门3">部门3option>
      <option value="部门4">部门4option>
      <option value="部门5">部门5option>
  select>
    
  

3、然后在js中调用Chosen定义的方法：

  ?
        $(function(){
      $('.dept_select').chosen();
  });
  
  

4、搞定收工，屌丝立马变成高富帅有木有~

[置顶] [jQueryUI] - Chosen：select下拉选择框美化插件及问题

chosen插件的一些设置项:

1、默认文字选项

你可以在select元素上添加data-placeholder属性定义默认文字，也就是在没有选择选项的情况下，显示的文字。

  ?
        <select data-placeholder="选择部门" style="width:150px;" class="dept_select">
      <option value="-1">option>
      <option value="部门1">部门1option>
      <option value="部门2">部门2option>
      <option value="部门3">部门3option>
      <option value="部门4">部门4option>
      <option value="部门5">部门5option>
  select>
    
  

这里还要注意一点，要想显示出默认文字，select下的第一个选择项必须为空的option。

2、对其方式
选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：

  ?
        <select data-placeholder="选择部门" class="dept_select   chzn-rtl" style="width:150px;">

3、JS参数设置

在调用chosen()方法时，我们可以设置一些参数：

选项	描述
no_results_text	无搜索结果显示的文本
allow_single_deselect	是否允许取消选择
max_selected_options	当select为多选时，最多选择个数

  ?
        $(".some_select").chosen({
      /*max_selected_options:   2,*/
      no_results_text:"没有找到",
      allow_single_deselect:true
  });
  
  

4、事件

　a) change事件：

  ?
        $(".dept-select").chosen().change(function(){
      //do   something...
  });
  
  

　b) 当我们需要动态更新select下的选择项时，该怎么办呢？只要在更新选择项后触发Chosen中的liszt:updated事件就可以了：　　

  ?
        //...$(".dept-select").html('...部门6...');
  $(".dept-select").trigger("liszt:updated");
  
  

其他问题：

1、如果不想要搜索框的话，很简单，用css把它隐藏掉就OK了：

  ?
        .chzn-container-single   .chzn-search {
      display:none;
  }
  
  

2、做为天朝的程序猿，不得不考虑ie6和ie7下的情况。好吧，用ie6打开一看，select还是一副屌丝样! [置顶] [jQueryUI] - Chosen：select下拉选择框美化插件及问题　　

　翻看chosen.jquery.js发现在chosen方法中有如下一段，ie6和ie7直接返回select对象本身：

  ?
        if ($.browser.msie   && ($.browser.version === "6.0" ||   ($.browser.version === "7.0" &&   document.documentMode === 7))) {
      return this;
  }
  
  

　把这段js注释掉，重新打开ie6和7，不再屌丝了有木有！虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

　终于能高高兴兴地在ie6使用了，尼玛过了会又发现问题了，还是坑爹的ie6和7！如果2个select在一起又不和谐了，请看：

[置顶] [jQueryUI] - Chosen：select下拉选择框美化插件及问题

　点开选择部门，尼玛这是闹哪样！见图：

[置顶] [jQueryUI] - Chosen：select下拉选择框美化插件及问题

　好吧，这应该是z-index的问题，把css修改下，结果各种div各种z-index改到吐血还是这副死样子。

　最后没办法了，想了个笨办法，动态改变所有chzn-container的z-index，在点击select的时候让当前container的z-index最高，让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法：

  ?
        Chosen.prototype.activate_field   = function()   {
      this.container.addClass("chzn-container-active");
      this.active_field   = true;      
      this.search_field.val(this.search_field.val());
      return this.search_field.focus();
  };
  
  

　将此方法改为：

  ?
        Chosen.prototype.activate_field   = function()   {
      this.container.addClass("chzn-container-active");
      this.active_field   = true;      
      this.search_field.val(this.search_field.val());
      var zindex   = 1010;
      this.container.css('z-index','1010')
      $('.chzn-container').not(this.container).css('z-index',--zindex);
      return this.search_field.focus();
  };
  
  

　当然，你也可以在生成.chzn-container的时候按顺序赋予不同的z-index，这样就可以不用每次点击select都要重新设一遍了。

　至此，ie6和ie7下使用Chosen基本没什么问题了。。。　　

网站题目：[置顶] [jQueryUI]-Chosen：select下拉选择框美化插件及问题
URL标题：http://xiwangwangguoyuan.com/article/jjghhd.html

网站建设知识

[置顶] [jQueryUI]-Chosen：select下拉选择框美化插件及问题

chosen插件的一些设置项:

其他资讯