使用 jQuery 应用 css 会阻止 <select> 显示下拉列表答案

【问题标题】：Applying css with jQuery stops <select> from showing drop down list使用 jQuery 应用 css 会阻止 <select> 显示下拉列表
【发布时间】：2010-12-04 11:17:11
【问题描述】：

所以我有一些<select> 标签，我想在IE 中显示全部内容。我环顾四周，找到了few fixes，但我不想包含 YUI，因为我已经在其他地方使用 jQuery，并且更愿意将选择保留在页面上而不是用 DIV 替换它。

在我提出的代码中，FF3 运行良好。在 Internet Explorer (6,7,8) 中，第一次单击 <select> 会使下拉菜单闪烁，然后它就会消失。我已经尝试用focus 和mousedown 代替代码中的click 事件，但没有成功。

如果我在autoWidth 中删除了element.css 的两个设置，则下拉菜单会按预期工作，但不会获得很好的宽度。有谁知道什么会导致css的设置在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>

【问题讨论】：

标签： jquery internet-explorer drop-down-menu

【解决方案1】：

看起来问题出在 IE 对下拉菜单的渲染上。如果您更改 <select> 上的 css，下拉菜单将被重置（初始点击时闪烁）。

因此，使用mousedown 事件而不是click 修复了前两个下拉菜单，但由于第三个下拉菜单的额外重置（因为它已经足够大）破坏了 IE 的本机更改事件（下拉无论您点击什么选项，down 值都不会改变）。

解决方案：在初始页面加载时 - 如果下拉列表已经足够大，请不要绑定事件。我将宽度切换为自动，并测量了<select>，然后只在下拉菜单需要时绑定宽度变化事件，您可以避免事件到其他下拉菜单。

这是经过代码测试的 IE 6、7、8。 FireFox 一开始就可以正常工作，Safari 也一样。您可以看到带有 IE6 fix 注释的行，该行在删除时会导致 IE6 中的原始（不正确）行为。老实说，我不知道为什么。

<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>

【讨论】：