PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

27 March 2010 By


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

  • data1
  • data2
  • data3
  • data4
  • data5
  • data6

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>

Tags:: checkbox listbox jquery



ตัวอย่างนี้ใช้งานกับ jQuery เวอร์ชั่น 1.7.1 เป็นต้นไป อาจจะต้องประยุกต์เพิ่มเติมหากใช้กับเวอร์ชั่นเก่าๆ


URL สำหรับอ้างอิง