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

27 March 2010 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

jquery checkbox listbox

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery checkbox listbox

ดูแล้ว 19,160 ครั้ง

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