สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox

ตัวอย่าง

เลือกข้อมูล

• Nokia 5235
• Nokia 2710
• Nokia 7230
• Nokia 6700
• Nokia 5330
• Nokia 2690

HTML Code

<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 title="Nokia 5235" ref="http://www.siamphone.com/picture/nokia/5235/nokia_5235_thumb.jpg">Nokia 5235</li>    
<li title="Nokia 2710" ref="http://www.siamphone.com/picture/nokia/2710_navigation/nokia_2710_navigation_thumb.jpg">Nokia 2710</li>  
<li title="Nokia 7230" ref="http://www.siamphone.com/picture/nokia/7230/nokia_7230_thumb.jpg">Nokia 7230</li>    
<li title="Nokia 6700" ref="http://www.siamphone.com/picture/nokia/6700_slide/nokia_6700_slide_thumb2.jpg">Nokia 6700</li>    
<li title="Nokia 5330" ref="http://www.siamphone.com/picture/nokia/5330_mobiletvedition/nokia_5330_mobiletvedition_thumb.jpg">Nokia 5330</li>    
<li value="Nokia 2690" title="http://www.siamphone.com/picture/nokia/2690/nokia_2690_thumb.jpg">Nokia 2690</li>  
</ul> 
<div class="myPic">
<img src="" />
</div>   
</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:80px; 
    list-style:none;   
}   
ul.myUL1 li:hover{   
    margin:0px;   
    padding:0px;   
    cursor:pointer;   
    background-color:#666666;   
    color:#FFFFFF;   
}
div.myPic{
	display:block;
	width:75px;
	height:80px;
    color:#333333;   
    background-color:#EAEAEA;   
    border:1px solid #999999;   
	border-right-width:0px;
	z-index:110;	
	position:absolute;  
	display:none;
	text-align:center;
}
div.myPic img{
	width:35px;
	height:70px;
	border:0;
	display:none;
}
</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 รายการตัวเลือก   
	var obj3="div.myPic";  // กำหนด 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   
        });   
		$(obj3).show().css({   
            "left":nX,   
            "top":nY   
        }); 
		$(obj1).html("<option value=\"\">เลือกข้อมูล</option>").blur();   
    });   
    $(obj2).hover(function(){   
        $(this).show();    
		$(this).find("li").hover(function(){   
			$(obj3).find("img").show().attr("src",$(this).attr("ref"));
		});	
		$(this).find("li").click(function(){  	
			var setValue=$(this).attr("title");
			var setText=$(this).text();
			setText=(setText!="")?setText:"เลือกข้อมูล";
			$(obj2).hide();   
			$(obj1).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();   
			$(obj3).hide();  			
		});
    },function(){   
		if($(obj1).val()==""){
			var setValue="";
			var setText="";
			setText=(setText!="")?setText:"เลือกข้อมูล";
			$(this).hide();   
			$(obj1).html("<option value=\""+setValue+"\">"+setText+"</option>").blur();   
			$(obj3).hide();  		
		}
    });  
});
</script>