Geek Answers Handbook

Applying css with jQuery stops <select> from the drop-down list

So, I have tags <select>that I would like to show all the content in IE. I looked around and found a few fixes , but I don't want to enable YUI since I'm already using jQuery elsewhere, and would rather save the selections on the page instead of replacing the DIV.

In the code I came up with, FF3 works fine. In Internet Explorer (6,7,8), the first click on a button <select>lights up and then disappears. I tried focusand mousedowninstead of an event clickin the code, without success.

If I remove both options element.cssin autoWidth, the dropdowns work as expected, without a bonus with a good width. Does anyone know what will cause css installation to crash 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>
0
source share
1 answer

It seems the problem is with IE rendering dropdowns. If you change css to <select>, reset will appear in the drop-down list (flicker on initial click).

, mousedown click , - reset ( ) IE ( , ).

. - , . <select>, , , .

IE IE 7,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>
+1

More articles:


All Articles