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

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

<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 http://www.ninenik.com/demo/fix_select.php