IE中选择列表的宽度答案

【问题标题】：Width of select list in IEIE中选择列表的宽度
【发布时间】：2013-03-25 16:01:12
【问题描述】：

我阅读了Dropdownlist width in IE 的文章，但不幸的是我无法适应我的需要。

我有一个选择列表，其中包含一些在新窗口中打开 URL 的选项，我使用下面的 jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

链接选择列表选项的脚本如下：

<script type="text/javascript">
  $(document).ready(function() { 
  $('.openSelect').change(function(){ 
    var selectedValue=$(this).val(); 
      if (selectedValue.match(/http/)) { 
       var open = window.open($(this).val(),'_blank'); 
       if (open == null || typeof(open)=='undefined'){ 
       alert("Please turn off pop-up blocker and reload this page to visit:  " + selectedValue); 
       }
 }
});
});
</script>

我的问题是下拉菜单的宽度受到 IE6、7 和 8 中表格单元格宽度的限制，所以我必须以某种方式修复它以扩展为最长选项内容的宽度。唯一的限制是我必须保留上面的脚本并以某种方式修改它，而不是完全改变它。

选择列表的示例在以下页面中给出： http://www.myairlease.com/available/available_for_lease_737

【问题讨论】：

标签： internet-explorer select drop-down-menu option

【解决方案1】：

您遇到的问题是 IE8 和更早版本使用操作系统的内置下拉框控件来处理 HTML 选择框。所有其他浏览器，包括 IE9 和更高版本都自己呈现选择框，但 IE6/7/8 不会。

这带来了许多怪癖和限制，您看到的效果是最明显的效果之一。

简短的回答是，在 IE8 及更早版本中，无法强制标准选择框显示比选择框本身更宽的字符串。有一些 hacky 变通方法，但它们并不是真的很好用，尤其是在处理基于表格的布局时。

更长的答案是，如果您需要这样做，那么您唯一的选择是使用自定义选择框控件。有许多 jQuery 插件用它们自己的覆盖默认选择框。有很多负载可供选择，并且它们具有各种不同的功能，因此我不会推荐特定的功能，而是将您引导至this site，其中列出了十个最佳功能。可以肯定的是，至少其中一些会按照您需要的方式工作。

一般来说，它们使用起来非常简单，并且不需要对您的 HTML 代码进行任何更改；只需在您的文档就绪函数中添加一点额外的 javascript 即可激活它们。

希望对你有帮助。

【讨论】：

【解决方案2】：

感谢您的帮助！

我尝试使用 LinkSelect 插件，但我肯定做错了什么。 http://www.givainc.com/labs/linkselect_jquery_plugin.htm#options

我的选择标签如下

<select class="openSelect" style="width:px; color:#0066ff;">

所以我只是在头部加载以下内容：

<script type="text/javascript" src="js/jquery.linkselect.min.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<link type="text/css" href="css/jquery.linkselect.css" rel="stylesheet" media="all" />

并将我的脚本更改为以下内容？？

<script type="text/javascript">
$(document).ready(function() { 
 $('.select.openSelect').openSelect();
  $('.openSelect').change(function(){ 
  var selectedValue=$(this).val(); 
  if (selectedValue.match(/http/)) { 
       var open = window.open($(this).val(),'_blank'); 
       if (open == null || typeof(open)=='undefined'){ 
       alert("Please turn off pop-up blocker and reload this page to visit:  " + selectedValue); 
       }
     }
  });
});
</script>

我试过了，但它不起作用所以知道我的错误在哪里吗？？

谢谢

【讨论】：

【解决方案3】：

我查看了描述插件的页面的源代码，它们使用的内容与说明中给出的完全不同.....

有人可以帮助解决如何进行吗？？

谢谢

【讨论】：