ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery

<style type="text/css">  
select#my_select{  
    width:200px;  
    color:#333333;     
    background-color:#EAEAEA;     
    border:1px solid #999999;     
}  
select#my_select option{  
    color:#333333;     
    background-color:#EAEAEA;     
    border:1px solid #999999;     
}  
ul.myUL1{     
    margin:0px;     
    padding:0px;     
    font-size:12px;     
    width:200px;     
    color:#333333;     
    background-color:#EAEAEA;     
    border:1px solid #999999;     
    position:absolute;     
    display:none;     
    list-style:none;     
    z-index:100;  
/* ถ้ารายการตัวเลือกมีมาก สามารถกำหนดความสูง แล้วให้มีมี scroll เลื่อนดูข้อมูล   
โดยเอา comment สองบรรทัดล่างนี้ออก */        
/*  height:80px;   
    overflow:auto;*/    
}     
ul.myUL1 li{     
    margin:0px;     
    padding:0px;     
    cursor:pointer;     
    text-indent:5px;   
    list-style:none;     
}     
ul.myUL1 li:hover{     
    margin:0px;     
    padding:0px;     
    cursor:pointer;     
    background-color:#666666;     
    color:#FFFFFF;     
}  
</style>  

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>  
<script type="text/javascript">  
$(function(){  
    var obj1="select#my_select"; // กำหนด object  เป้าหมาย     
    var obj2="ul.myUL1"; // กำหนด object รายการตัวเลือก     
    $(obj1).focus(function(){     
        var nX=$(this).offset().left;     
        var nY=$(this).offset().top+($(this).height()+3);     
        $(this).html("");  
        $(obj2).show().css({     
            "width":$(this).width()+"px",  
            "left":nX,     
            "top":nY     
        });     
        $(obj1).html("<option value=\"\">เลือกข้อมูล</option>").blur();     
    });     
    $(obj2).children("li").click(function(){   
        var iCheck=($(this).children("input").attr("checked")=="checked")?false:true;    
        $(this).children("input").attr("checked",iCheck);  
    });     
    $(obj2).hover(function(){     
        $(this).show();      
    },function(){     
        var setValue="";  
        var setText="";  
        $(this).find("input").each(function(key){  
            if($(this).attr("checked")=="checked"){  
                setValue+=$(this).val()+",";  
                setText+=$(this).parent("li").text()+",";  
            }         
        });  
        setText=(setText!="")?setText:"เลือกข้อมูล";  
        $(this).hide();     
        $(obj1).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();     
    });    
});  
</script>

<div style="margin:auto;width:400px;">  
<form id="form1" name="form1" method="post" action="">  
  	<select name="my_select" id="my_select">  
    <option value="">เลือกข้อมูล</option>  
</select>  
	<ul class="myUL1" style="display: none; width: 198px; left: 474.5px; top: 296px;">
        
	<?php   
	$i=1;  
	$q="SELECT DeviceID,DeviceName FROM charge WHERE DeviceID LIKE  '1%'";  
	$qr=mysql_query($q);  
		while($rs=mysql_fetch_array($qr)){  
	?>  
	<li>  
  	<input name="data<?=$i?>" type="checkbox" id="data<?=$i?>" value="<?=$rs['DeviceID']?>" />  
 	 <?=$rs['DeviceName']?></li>    
	<li>  
	<?php $i++; }?>  
	</ul>    
		
     </form>  
</div>