在IE6和IE7浏览器下,如果设置了select的宽度,而option比设置的这个宽度要宽,则有一部分会被挡住.
这个issue只在IE6和IE7下存在,其他浏览器都没有这个问题.
在网上看了几个解决办法,但都有些小bug,所以自己用JQuery解决了这个问题.
function select_fix_ie(el) {
var isOpen = $(el).data("isOpen");
if (isOpen != null) {
return;
}
$(el).mousedown(function() {
var isOpen = $(this).data("isOpen");
if (isOpen) {
return;
}
$(this).data("isOpen", true);
var clone_selection = $(this).data("clone");
if (clone_selection == null) {
clone_selection = $("<div></div>").get(0);
$(clone_selection).insertAfter(this);
$(clone_selection).css("display", "block");
$(clone_selection).css("width", $(this).css("width"));
$(clone_selection).css("height", "20px");
$(clone_selection).css("position", $(this).css("position"));
$(clone_selection).css("z-index", $(this).css("z-index"));
$(this).data("clone", clone_selection);
}
$(clone_selection).show();
$(clone_selection).css("visibility", "hidden");
var position = $(this).position();
var oldWidth = $(this).width();
$(this).css("width", "auto");
var newWidth = $(this).width();
if (oldWidth >= newWidth) {
$(this).css("width", $(clone_selection).css("width"));
}
$(this).css("top", position.top + "px");
$(this).css("left", position.left + "px");
$(this).css("position", "absolute");
$(this).css("z-index", "1000");
}).blur(function() {
select_fix_ie_close(this);
}).change(function() {
select_fix_ie_close(this);
})
$(el).data("isOpen", false);
}
function select_fix_ie_close(el) {
var isOpen = $(el).data("isOpen");
if (isOpen) {
var clone_selection = $(el).data("clone");
$(clone_selection).css("display", "none");
$(el).css("position", "");
$(el).css("width", $(clone_selection).css("width"));
$(el).css("top", "");
$(el).css("left", "");
$(el).css("z-index", $(clone_selection).css("z-index"));
$(el).data("isOpen", false);
}
}
可以在附件里面下载使用的例子
分享到:
- 2009-10-13 15:51
- 浏览 5051
- 评论(2)
- 论坛回复 / 浏览 (0 / 5504)
- 查看更多
相关推荐
基于Jquery模拟Select,解决IE显示问题
简单实用的jquery select2组件
jquery select2 html select 内容搜索 下拉框搜索
解决IE6 中select 穿透 div 等层的问题
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select 下拉模糊查询 jQuery-select
jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js
select选择框控件-jquery.editable-select,并且可以编辑,可以输入
Jquery模拟select效果实现,纯自写,简单实用,可自行修改样式。
jquery.editable-select插件
jquery select2 select美化插件
jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定
NULL 博文链接:https://jyao.iteye.com/blog/579409
此为jquery.editable-select插件的使用案例,这是一款非常好用的插件,好用之处:既可下拉框选择也可手动输入,而且手动输入还能对下拉框选项进行过滤,而且还可实现一些相关事件,具体请查看官方文档。
Jquery combo-select
select 检索插件jquery框架,根据输入内容自动过滤select 选项
jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便
jQuery实现select样式美化 jQselect.js
完美解决各个浏览器下select显示不同样样式,本资源采用主要JQuery类库。全面支持各种web开发语言。其中包含调用案例