ตัวอย่าง
HTML Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <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> |
