ตัวอย่าง
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>
