Question

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

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

如果我删除了element.css autoWidth中<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>的设置，那么下拉工作就像预期的那样，没有宽度很好的奖励。有谁知道什么会导致css的设置使IE中的下拉失败？

{{1}}

Answer 1

看起来问题在于IE渲染下拉列表。如果您更改<select>上的css，则下拉菜单会重置（初次点击时闪烁）。

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

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

这是经过代码测试的IE 6,7,8。 FireFox开始正常工作，与Safari相同。你可以看到一行评论IE6修复，这一行，删除后，导致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>

使用jQuery应用css会停止<select>显示下拉列表</select>

1 个答案: