ความกว้างของ 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 https://www.ninenik.com/demo/fix_select.php