我阅读了文章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
答案 0 :(得分:0)
您遇到的问题是IE8及更早版本使用操作系统的内置投递箱控件来进行HTML选择框。所有其他浏览器,包括IE9及更高版本,都会自行渲染选择框,但IE6 / 7/8不会。
这带来了许多怪癖和限制,你看到的效果是最明显的。
简短的回答是,IE8及更早版本中没有办法强制标准选择框显示比选择框本身更宽的字符串。有一些hacky解决方法,但它们并没有真正起作用,尤其是当你处理基于表格的布局时。
答案越长,如果您需要这样做,那么您唯一的选择就是使用自定义选择框控件。有许多jQuery插件用自己的方式覆盖默认选择框。有些负载可供选择,它们有各种不同的功能,所以我不会推荐一个特定的功能,而是引导你this site列出十个最好的功能。这是一个相当不错的选择,至少其中一些将以您需要的方式工作。
一般来说,它们使用起来非常简单,并且不会对HTML代码进行任何更改;只需在文档就绪函数中添加一小部分额外的javascript即可激活它们。
我希望有所帮助。
答案 1 :(得分:0)
感谢您的帮助!!
我尝试使用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>
我尝试了它并没有用,所以任何想法我的错误在哪里?
由于
答案 2 :(得分:0)
我看了一下描述插件的页面的源代码,他们使用的内容与他们在说明中提供的内容完全不同......
有人可以帮忙解决如何继续问题吗?
谢谢