将jss应用于jQuery停止< select>从显示下拉列表 [英] Applying css with jQuery stops <select> from showing drop down list
问题描述
所以我有一些< select> 标签，我想在IE中显示整个内容。我已经环顾四周，发现一个几个 修复，但是我不想包括YUI，因为我已经在其他地方使用jQuery ，并且宁愿在页面上保留选择，而不是用DIV替换它。
So I've got some <select> tags that I would like to show the entire contents in IE. I've looked around and found a few fixes, but I don't want to include YUI since I'm already using jQuery elsewhere, and would prefer to keep the selects on the page instead of replacing it with DIVs.
在我提出的代码中，FF3非常棒。在Internet Explorer（6,7,8）中，首先点击< select> 会将下拉列表中的下拉菜单轻轻地闪烁，然后消失。我尝试焦点和 mousedown 代替点击代码中的事件，没有成功。
In the code that I've come up with, FF3 works great. In Internet Explorer (6,7,8) the first click on the <select> flashes the drop down and then it disappears. I've tried focus and mousedown in place of the click event in the code, no success.
如果我删除了 element.css code> autoWidth 下拉按照预期工作，没有一个很好的宽度的奖金。有没有人知道什么会导致CSS的设置使IE下拉失败？
If I remove both of the setting of element.css in autoWidth the drop downs work as expected, without the bonus of having a nice width. Does anyone know what would cause the setting of the css to make the drop down fail in IE?
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var count = 0;
autoWidth = function(e) {
$element = $(e.target)
$element.css("width","auto");
if($element.width() < $element.data("originalWidth"))
{
$element.css("width", $element.data("originalCSSWidth"));
}
}
resetWidth = function(e) {
$element = $(e.target)
$element.css("width", $element.data("originalCSSWidth"));
$("#counter").text(++count);
}
recordEvent = function(e) {
$("#event").text($("#event").text() + " " + e.type);
}
dropDownIEWidthFix = function() {
//if($.browser.msie)
//{
$dropDown = $(this);
$dropDown.data("originalWidth", $dropDown.width());
$dropDown.data("originalCSSWidth", $dropDown.css("width"));
$dropDown.blur(recordEvent);
$dropDown.blur(resetWidth);
$dropDown.change(recordEvent);
$dropDown.change(resetWidth);
$dropDown.click(recordEvent);
$dropDown.click(autoWidth);
//}
};
$(function() {
$("select.officeItemList").each(dropDownIEWidthFix);
});
function trackingSelectionChanged(select)
{
$("#event").text($("#event").text() + " inlineOnChange");
}
</script>
</head>
<body>
<div style="overflow:hidden;width:148px;">
<select class="officeItemList" style="width:148px;" onchange="trackingSelectionChanged(this);">
<option value="1">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
<option value="10">executive</option>
<option value="11">janitor</option>
<option value="12">developer</option>
</select>
</div>
<div style="overflow:hidden;width:160px;">
<select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
<option value="10">executive</option>
<option value="11">janitor</option>
<option value="12">developer</option>
</select>
</div>
<div style="overflow:hidden;width:160px;">
<select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
<option value="1">eee</option>
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">ffff</option>
<option value="10">executive</option>
<option value="11">janitor</option>
</select>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
AdjustWidth fired :<span id="counter"></span> times
<div id="event"></div>
</body>
推荐答案
看起来问题是IE的渲染起伏。如果您在< select> 上更改css，则下拉列表将重置（初始点击时闪烁）。
Looks like the problem is with IE's rendering of the drop downs. If you change the css on the <select> the drop down gets reset (the flicker on initial click).
所以，使用 mousedown 事件而不是单击修复前两个下拉列表，但是由于额外的重置在第三个下拉（因为它已经足够大）已经打破了IE的本机更改事件（下拉值永远不会改变，无论您点击什么选项）。
So, using the mousedown event instead of click fixes the first two drop downs, but because of the additional reset on the third drop down (since it is large enough already) breaks IE's native change event (the drop down value never changes regardless of what options you click).
解决方案：在初始页面加载 - 如果下拉列表已经足够大，请勿绑定事件。我将宽度切换到自动，并测量了< select> ，然后只有在下拉菜单需要时才绑定宽度更改事件，您可以避免事件发生到其他下拉列表。
Solution: On the initial page load - don't bind the events if the drop down is large enough already. I switched the width to auto, and measured the <select>, then only bind the width change events when the drop downs need it, you can avoid the events to the other drop downs.
这是经过代码测试的IE 6,7,8。 FireFox可以正确开始，与Safari相同。
您可以看到一条与IE6修复程序注释的行，此行在被删除时会导致IE6中的原始（不正确）行为。说实话，我不知道为什么。
Here is the code- tested IE 6,7,8. FireFox works correctly to begin with, same with Safari. You can see a line commented with IE6 fix, this line, when removed, causes the original (incorrect) behavior in IE6. To be honest, I'm not sure why.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
dropDownIEWidthFix = function() {
if($.browser.msie) {
$dropDown = $(this);
$dropDown.data("originalWidth", $dropDown.width());
$dropDown.data("originalCSSWidth", $dropDown.css("width"));
$dropDown.css("width", "auto");
if($dropDown.width() > $dropDown.data("originalWidth")) {
$dropDown.blur(function(e) {
$element = $(e.target);
$element.css("width", $element.data("originalCSSWidth"));
});
$dropDown.change(function(e) {
$element = $(e.target);
$element.css("width", $element.data("originalCSSWidth"));
});
$dropDown.mousedown(function(e) {
$element = $(e.target);
$element.css("width","auto");
$element.width(); //IE6 fix.
});
}
$dropDown.css("width", $dropDown.data("originalCSSWidth"));
}}
$(function() {
$("select.officeItemList").each(dropDownIEWidthFix);
});
function trackingSelectionChanged(select)
{
}
</script>
</head>
<body>
<div style="float: left; display: inline; width: 160px;">
<div class="FUNCOptionTitle">
<span style="text-align: right;">col1</span>
</div>
<div style="overflow:hidden;width:148px;">
<select class="officeItemList" style="width:148px;" onchange="trackingSelectionChanged(this);">
<option value="1">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
<option value="10">executive</option>
<option value="11">janitor</option>
<option value="12">developer</option>
</select>
</div>
</div>
<div style="float: left; display: inline; width: 165px;">
<div class="FUNCOptionTitle">
<span style="text-align: right;">col2</span>
</div>
<div style="overflow:hidden;width:160px;">
<select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option>
<option value="10">executive</option>
<option value="11">janitor</option>
<option value="12">developer</option>
</select>
</div>
</div>
<div style="float: left; display: inline; width: 165px;">
<div class="FUNCOptionTitle">
<span style="text-align: right;">col3</span>
</div>
<div style="overflow:hidden;width:160px;">
<select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);">
<option value="1">eee</option>
<option value="3">pencil</option>
<option value="4">ruler</option>
<option value="5">ink</option>
<option value="7">A4 paper</option>
<option value="8">A3 paper</option>
<option value="9">ffff</option>
<option value="10">executive</option>
<option value="11">janitor</option>
</select>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
AdjustWidth fired :<span id="counter"></span> times
<div id="event"></div>
</body>
这篇关于将jss应用于jQuery停止< select>从显示下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
