CODEWITHSUNDEEP
jqueryselect
Scott
Scott

Reputation: 11186

Select box shrinks in IE7 but not IE6 or IE8

I'm having a problem in IE7 with jquery and select boxes. When I set the width of a select box and then use jquery to re-populate the items on change of the first select box, the second select box is being reduced based off of the set width.

For example : The follow code uses two select boxes. When the first select box has a change event triggered, it will remove all the second select box and add some new values. If I remove the style attribute for the second select box the desired behavior is met. With the style attribute left in, the second select box will get smaller and smaller and eventually just disappear.

This only happens in IE7.

Code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>test</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#selOne").change(function(){
                //Clear out the current service list
                $("#selTwo option").each(function(){
                    $(this).remove();
                });

                for(var i=0; i < 10; i++){
                     var newOption = '<option value="'+ i +'">'+ i +'</option>';
                     $("#selTwo").append(newOption);
                }
            });
        });
    </script>

</head>
<body>
    <select id="selOne" class="number req" style="width: 90%;">
         <option value="" selected="selected">Initial Select</option>
         <option value="">a</option>
         <option value="">b</option>
         <option value="">c</option>

    </select>
    <select id="selTwo" class="number req" style="width: 90%;">
         <option value="" selected="selected">These should update</option>
         <option value="">100</option>
         <option value="">101</option>
         <option value="">102</option>
    </select>
</body>
</html>

How can I still specify a width, but not have the select box shrink down to nothing? Is the only way an absolute width in pixels?

Upvotes: 5

Views: 2832

Answers (3)

Shahin
Shahin

Reputation: 1

In my case, I just used CSS hack for IE7 like following - 

select.number { *width: 280px !important; }

Note: Please change to your equivalent width in px.

Upvotes: 0

jitter
jitter

Reputation: 54605

Can you try this one?

$("<option>").attr("value", i).text(i).appendTo("#selTwo");

Upvotes: 0

Scott
Scott

Reputation: 11186

The following code gets the second select box to stay the correct size:

        $("#selOne").change(function(){
            //Clear out the current service list
            $("#selTwo option").each(function(){
                $(this).remove();
            });

            /* IE7 Fix: reset the width based on pixels
                It doesn't matter to how many, just that
                the width is in pixels
            */
            $("#selTwo").css("width","1px");

            for(var i=0; i < 10; i++){
                 var newOption = '<option value="'+ i +'">'+ i +'</option>';
                 $("#selTwo").append(newOption);
            }

            /*IE7 FIX: rest the width back to our desired percent */
            $("#selTwo").css("width","90%");
        });

Upvotes: 7

Related Questions