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

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

HTML ตัวอย่าง

<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">  
<li>
  <input name="data1" type="checkbox" id="data1" value="1" />
  data1</li>  
<li>
  <input name="data2" type="checkbox" id="data2" value="2" />
  data2</li>  
<li>
  <input name="data3" type="checkbox" id="data3" value="3" />
  data3</li>  
<li>
  <input name="data4" type="checkbox" id="data4" value="4" />
  data4</li>  
<li>
  <input name="data5" type="checkbox" id="data5" value="5" />
  data5</li>  
<li>
  <input name="data6" type="checkbox" id="data6" value="6" />
  data6</li>  
</ul>    
</form>
</div>

CSS Code ตัวอย่าง

<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>

Javascript Code ตัวอย่าง

<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>