ตัวอย่าง ทำให้ เลือก 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>
