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?