Menu
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?
319
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%");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With