大家都知道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.  
         
  2. <%@ page language="java" contentType="text/html; charset=UTF-8" 
    3.  
         
  3.     pageEncoding="UTF-8"%> 
    4.  
         
  4. <%@ include file="/common/taglibs.inc" %> 
    5.  
         
  5. <html> 
    6.  
         
  6. <head> 
    7.  
         
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    8.  
         
  8. <link type="text/css" rel="stylesheet" href="${ctx}/chosen/chosen.css"/> 
    9.  
         
  9. <script type="text/javascript" src="${ctx}/js/jquery-1.6.2.min.js"></script> 
    10.  
         
  10. <script type="text/javascript" src="${ctx}/chosen/chosen.jquery.min.js"></script> 
    11.  
         
  11. <title>测试下拉框</title> 
    12.  
         
  12. </head> 
    13.  
         
  13. <body> 
    14.  
         
  14.     <select class="chzn-select"  data-placeholder="Choose" style="width:350px;" id="select_area" onchange="showCity()">  
    15.  
         
  15.         <option></option> 
    16.  
         
  16.     </select> 
    17.  
         
  17.     <br> 
    18.  
         
  18.     <br> 
    19.  
         
  19.     <select class="chzn-select"  style="width:350px;"  id="select_province" > 
    20.  
         
  20.         <option></option> 
    21.  
         
  21.     </select> 
    22.  
         
  22.  
    23.  
         
  23. <script type="text/javascript"> 
    24.  
         
  24.     $(document).ready(function(){ 
    25.  
         
  25.         $.ajax({ 
    26.  
         
  26.             type:'post', 
    27.  
         
  27.             url:'${ctx}/base/area!ajaxGetAllArea.action', 
    28.  
         
  28.             async:false, 
    29.  
         
  29.             dataType:'json', 
    30.  
         
  30.             success:function(data){ 
    31.  
         
  31.                 var selectObj = $("#select_area"); 
    32.  
         
  32.                 var selectpro=$("#select_province"); 
    33.  
         
  33.                 selectObj.parent().children().remove('div'); 
    34.  
         
  34.                 selectObj.removeClass(); 
    35.  
         
  35.                 for(var i=0;i<data.length;i++){ 
    36.  
         
  36.                     var option=new Option(data[i].name,data[i].key); 
    37.  
         
  37.                     selectObj.get(0).options.add(option); 
    38.  
         
  38.                 } 
    39.  
         
  39.                     selectObj.addClass("chzn-select"); 
    40.  
         
  40.                     selectObj.chosen(); 
    41.  
         
  41.                     selectpro.chosen(); 
    42.  
         
  42.             } 
    43.  
         
  43.         }); 
    44.  
         
  44.     }); 
    45.  
         
  45.      
    46.  
         
  46.     function showCity(){ 
    47.  
         
  47.         var parentId=document.getElementById("select_area"); 
    48.  
         
  48.         $.ajax({ 
    49.  
         
  49.             type:'post', 
    50.  
         
  50.             url:'${ctx}/base/area!ajaxGet.action', 
    51.  
         
  51.             data:'id='+parentId.value, 
    52.  
         
  52.             dataType:'json', 
    53.  
         
  53.             async:false, 
    54.  
         
  54.             success:function(data){ 
    55.  
         
  55.                 var selectObj = $("#select_province"); 
    56.  
         
  56.                 selectObj.parent().children().remove('div'); 
    57.  
         
  57.                 selectObj.removeClass(); 
    58.  
         
  58.                 var selectArea=$("#select_area"); 
    59.  
         
  59.                 selectArea.parent().children().remove('div'); 
    60.  
         
  60.                 selectArea.removeClass(); 
    61.  
         
  61.                 for(var i=0;i<data.length;i++){ 
    62.  
         
  62.                     var option=new Option(data[i].name,data[i].key); 
    63.  
         
  63.                     selectObj.get(0).options.add(option); 
    64.  
         
  64.                 } 
    65.  
         
  65.                     selectObj.addClass("chzn-select"); 
    66.  
         
  66.                     selectArea.addClass("chzn-select"); 
    67.  
         
  67.                     selectObj.chosen(); 
    68.  
         
  68.                     selectArea.chosen(); 
    69.  
         
  69.             } 
    70.  
         
  70.         }); 
    71.  
         
  71.     } 
    72.  
         
  72.     </script> 
    73.  
         
  73. </body> 
    74.  
         
  74.  
    75.  
         
  75. </html> 
    76.  
        
 
    
效果图：
 
    
 
 
    
 
    
 chosen还有个问题就是附带一个模糊查询，但是中文只能从第一个中文开始搜，这样就比较麻烦和没多大用处了。
 
    
解决方法：在chosen.jquery.js里面修改一下，Chosen.prototype.winnow_results这个方法里面
 
    
if(found)这个判断的上面一个判断，再加一个else if。也就是：
 
    
 
 
    
else if((option.html).indexOf(searchText) >= 0){ 
     
 
    
             found = true;
 
    
              results += 1;
 
    
            }
 
    
这样就可以中文进行模糊查询，不管第几个了。