แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย

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

css option jquery

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

ดูแล้ว 16,318 ครั้ง

ความกว้างของ option ใน ie กรณีเรากำหนดค่าความกว้าง ให้กับ tag select เช่น

1	`<select` `name="myselect"` `id="myselect"` `style="width:150px;">`

และข้อความในรายการ option มีขนาดกว้างกว่า ค่าที่กำหนด จะทำให้ข้อความในรายการ option
แสดงไม่หมด ซึ่งต่างจาก browser ตัวอื่นๆ ที่ปัญหานี้จะไม่เกิดขึ้น

กรณีปัญหา เมื่อเปิดผ่าน IE

กรณีบราวเซอร์อื่น

แก้ปัญหาโดยวิธีการต่อไปนี้

CSS code

<style type="text/css">
div.hideSelect{
    position:relative;
    width:150px; /* กำหนดค่าให้เท่ากับความกว้างเริ่มต้นที่ต้องการ */
    height:22px;
    overflow:hidden;
}
div.hideSelect select{
    position:absolute;
    float:left;
}
</style>

HTML code

<div class="hideSelect">
<select name="myselect" id="myselect" style="width:150px;" >
<option value="ใช้ PHP สร้าง Javascript อย่างง่าย ">ใช้ PHP สร้าง Javascript อย่างง่าย </option>
<option value="PHP MySQL connecting script and function ">PHP MySQL connecting script and function </option>
<option value="ตรวจสอบสถานะของ MySQL ด้วย phpinfo ">ตรวจสอบสถานะของ MySQL ด้วย phpinfo </option>
<option value="การสร้างวันเวลาปัจจุบัน ด้วยฟังก์ชัน date() ">การสร้างวันเวลาปัจจุบัน ด้วยฟังก์ชัน date() </option>
</select>  
</div> 

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){ 
    var mybrowser=navigator.userAgent;   
    if(mybrowser.indexOf('MSIE')>0){   
        $("div.hideSelect select").hover(function(){
                $(this).width("auto");
        },function(event){
                 if(event.relatedTarget!=null){
                    $(this).width(150); // กำหนดค่าให้เท่ากับความกว้างเริ่มต้นที่ต้องการ
                 }
                $("div.hideSelect select").bind("change blur",function(){
                    $(this).width(150); // กำหนดค่าให้เท่ากับความกว้างเริ่มต้นที่ต้องการ
                });
        });
    }       
});  
</script>

ตัวอย่าง

หรือคลิกดูตัวอย่างต่อไปนี้ใน IE https://www.ninenik.com/demo/fix_select.php

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ