У меня есть проблема в IE7 с jQuery и избранными полями. Когда я установил ширину избранного поля и затем использую jQuery, чтобы повторно заполнить объекты на изменении первого избранного поля, второе избранное поле уменьшается базирующееся прочь ширины набора.
Например: следовать код использует два избранных поля. Когда первому избранному полю инициируют событие изменения, оно удалит все второе избранное поле и добавит некоторые новые значения. Если я удаляю атрибут стиля для второго избранного поля, желаемое поведение встречено. С оставленным внутри атрибутом стиля второе избранное поле станет меньшим и меньшим и в конечном счете просто исчезнет.
Это только происходит в IE7.
Код следующие:
<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>
То, как я могу все еще указать ширину, но не иметь избранное поле, ни до чего не уменьшается? Действительно ли единственным путем является абсолютная ширина в пикселях?
Следующий код получает второе поле выбора, чтобы сохранить правильный размер:
$("#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%");
});
Вы можете попробовать это один?
$("<option>").attr("value", i).text(i).appendTo("#selTwo");