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

Jquery chosen插件。

用到的文件

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

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

这样就搞定了。

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

下面是一个例子。

 

   
   
   
   
    
    
    
    
    
  1. > 
    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美化下拉框_第1张图片

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

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

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

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

           found = true;

              results += 1;

            }

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