01.<style type="text/css">
02.select#my_select{
03. width:200px;
04. color:#333333;
05. background-color:#EAEAEA;
06. border:1px solid #999999;
07.}
08.select#my_select option{
09. color:#333333;
10. background-color:#EAEAEA;
11. border:1px solid #999999;
12.}
13.ul.myUL1{
14. margin:0px;
15. padding:0px;
16. font-size:12px;
17. width:200px;
18. color:#333333;
19. background-color:#EAEAEA;
20. border:1px solid #999999;
21. position:absolute;
22. display:none;
23. list-style:none;
24. z-index:100;
25.}
26.ul.myUL1 li{
27. margin:0px;
28. padding:0px;
29. cursor:pointer;
30. text-indent:5px;
31. list-style:none;
32.}
33.ul.myUL1 li:hover{
34. margin:0px;
35. padding:0px;
36. cursor:pointer;
37. background-color:#666666;
38. color:#FFFFFF;
39.}
40.</style>
41.<div style="margin:auto;width:400px;">
42.<form id="form1" name="form1" method="post" action="">
43. <select name="my_select" id="my_select">
44. <option value="">เลือกข้อมูล</option>
45. </select>
46.<ul class="myUL1">
47.<li><input name="data1" type="checkbox" id="data1" value="1">data1</li>
48.<li><input name="data2" type="checkbox" id="data2" value="2">data2</li>
49.<li><input name="data3" type="checkbox" id="data3" value="3">data3</li>
50.<li><input name="data4" type="checkbox" id="data4" value="4">data4</li>
51.<li><input name="data5" type="checkbox" id="data5" value="5">data5</li>
52.<li><input name="data6" type="checkbox" id="data6" value="6">data6</li>
53.</ul>
54.</form>
55.</div>
57.<script type="text/javascript">
58.$(function(){
59. var obj1="select#my_select";
60. var obj2="ul.myUL1";
61. $(obj1).focus(function(){
62. var nX=$(this).offset().left;
63. var nY=$(this).offset().top+($(this).height()+3);
64. $(this).html("");
65. $(obj2).show().css({
66. "width":$(this).width()+"px",
67. "left":nX,
68. "top":nY
69. });
70. });
71. $(obj2).children("li").click(function(){
72. var iCheck=($(this).children("input").attr("checked")=="checked")?false:true;
73. $(this).children("input").attr("checked",iCheck);
74. });
75. $(obj2).hover(function(){
76. $(this).show();
77. },function(){
78. var setValue="";
79. var setText="";
80. $(this).find("input").each(function(key){
81. if($(this).attr("checked")=="checked"){
82. setValue+=$(this).val()+",";
83. setText+=$(this).parent("li").text()+",";
84. }
85. });
86. setText=(setText!="")?setText:"เลือกข้อมูล";
87. $(this).hide();
88. $(obj1).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();
89. });
90.});
91.</script>
