chosen美化下拉框

 大家都知道select下拉框是最难美化的。这里有个Jquery的插件可以使下拉框变的魔幻起来。

Jquery chosen插件。

用到的文件

Jquery.js,chosen.jquery.js,chosen.css

然后定义一个select下拉框,把select的class加上"chzn-select"就OK了,非常的方便,然后调用js把下拉框渲染出来

<script>$(".chzn-select").chosen();</script>这样就搞定了。

要远程加载数据的话还是要动点手脚的,先把他的样式全部去掉,然后把数据加载出来之后再渲染下拉框。

下面是一个例子。

 

  
  
  
  
  1. <!DOCTYPE html> 
  2. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  3.     pageEncoding="UTF-8"%> 
  4. <%@ include file="/common/taglibs.inc" %> 
  5. <html> 
  6. <head> 
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  8. <link type="text/css" rel="stylesheet" href="${ctx}/chosen/chosen.css"/> 
  9. <script type="text/javascript" src="${ctx}/js/jquery-1.6.2.min.js"></script> 
  10. <script type="text/javascript" src="${ctx}/chosen/chosen.jquery.min.js"></script> 
  11. <title>测试下拉框</title> 
  12. </head> 
  13. <body> 
  14.     <select class="chzn-select"  data-placeholder="Choose" style="width:350px;" id="select_area" onchange="showCity()">  
  15.         <option></option> 
  16.     </select> 
  17.     <br> 
  18.     <br> 
  19.     <select class="chzn-select"  style="width:350px;"  id="select_province" > 
  20.         <option></option> 
  21.     </select> 
  22.  
  23. <script type="text/javascript"> 
  24.     $(document).ready(function(){ 
  25.         $.ajax({ 
  26.             type:'post', 
  27.             url:'${ctx}/base/area!ajaxGetAllArea.action', 
  28.             async:false, 
  29.             dataType:'json', 
  30.             success:function(data){ 
  31.                 var selectObj = $("#select_area"); 
  32.                 var selectpro=$("#select_province"); 
  33.                 selectObj.parent().children().remove('div'); 
  34.                 selectObj.removeClass(); 
  35.                 for(var i=0;i<data.length;i++){ 
  36.                     var option=new Option(data[i].name,data[i].key); 
  37.                     selectObj.get(0).options.add(option); 
  38.                 } 
  39.                     selectObj.addClass("chzn-select"); 
  40.                     selectObj.chosen(); 
  41.                     selectpro.chosen(); 
  42.             } 
  43.         }); 
  44.     }); 
  45.      
  46.     function showCity(){ 
  47.         var parentId=document.getElementById("select_area"); 
  48.         $.ajax({ 
  49.             type:'post', 
  50.             url:'${ctx}/base/area!ajaxGet.action', 
  51.             data:'id='+parentId.value, 
  52.             dataType:'json', 
  53.             async:false, 
  54.             success:function(data){ 
  55.                 var selectObj = $("#select_province"); 
  56.                 selectObj.parent().children().remove('div'); 
  57.                 selectObj.removeClass(); 
  58.                 var selectArea=$("#select_area"); 
  59.                 selectArea.parent().children().remove('div'); 
  60.                 selectArea.removeClass(); 
  61.                 for(var i=0;i<data.length;i++){ 
  62.                     var option=new Option(data[i].name,data[i].key); 
  63.                     selectObj.get(0).options.add(option); 
  64.                 } 
  65.                     selectObj.addClass("chzn-select"); 
  66.                     selectArea.addClass("chzn-select"); 
  67.                     selectObj.chosen(); 
  68.                     selectArea.chosen(); 
  69.             } 
  70.         }); 
  71.     } 
  72.     </script> 
  73. </body> 
  74.  
  75. </html> 

效果图:

 

 chosen还有个问题就是附带一个模糊查询,但是中文只能从第一个中文开始搜,这样就比较麻烦和没多大用处了。

解决方法:在chosen.jquery.js里面修改一下,Chosen.prototype.winnow_results这个方法里面

if(found)这个判断的上面一个判断,再加一个else if。也就是:

else if((option.html).indexOf(searchText) >= 0){

           found = true;

              results += 1;

            }

这样就可以中文进行模糊查询,不管第几个了。

你可能感兴趣的:(下拉框,chosen,chosen模糊查询)