Jquery 选择框在IE7中收缩，但在IE6或IE8中不收缩_Jquery_Select

Jquery 选择框在IE7中收缩，但在IE6或IE8中不收缩

jquery select

Jquery 选择框在IE7中收缩，但在IE6或IE8中不收缩,jquery,select,Jquery,Select,我在IE7中遇到了jquery和select框的问题。当我设置一个选择框的宽度，然后使用jquery在第一个选择框更改时重新填充项目时，第二个选择框将根据设置的宽度缩小例如：下面的代码使用两个选择框。当第一个选择框触发更改事件时，它将删除所有第二个选择框并添加一些新值。如果删除第二个选择框的“样式”属性，则满足所需的行为。当“样式”属性保留在中时，第二个选择框将变得越来越小，并最终消失这只发生在IE7中代码如下： <html xmlns="http://www.w3.org/199

我在IE7中遇到了jquery和select框的问题。当我设置一个选择框的宽度，然后使用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>


测试
$（文档）.ready（函数（）{
$（“#selOne”）.change（函数（）{
//清除当前服务列表
$（“#选择两个选项”）。每个（函数（）{
$（this.remove（）；
});
对于（变量i=0；i<10；i++）{
var newOption=''+i+''；
$（“#seltoo”）。追加（新选项）；
}
});
});
初选
A.
B
C
这些应该更新
100
101
102

如何仍然指定宽度，但不将选择框缩小为零？以像素为单位的绝对宽度是唯一的方法吗？

以下代码获取第二个选择框以保持正确的大小：

        $("#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%");
        });

$（“#selOne”）.change（函数（）{
//清除当前服务列表
$（“#选择两个选项”）。每个（函数（）{
$（this.remove（）；
});
/*IE7修复：基于像素重置宽度
有多少并不重要，只是那样
宽度以像素为单位
*/
$（“#seltoo”）.css（“宽度”，“1px”）；
对于（变量i=0；i<10；i++）{
var newOption=''+i+''；
$（“#seltoo”）。追加（新选项）；
}
/*IE7修复：将宽度恢复到所需的百分比*/
$（“#seltoo”）.css（“宽度”、“90%”）；
});

你能试试这个吗

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

$（“”）attr（“value”，i）.text（i）.appendTo（“#seltoo”）；

在我的例子中，我只是对IE7使用了CSS hack，如下所示-

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

注意：请更改为px中的等效宽度。

看起来像是浏览器错误，不确定您的问题是什么，甚至不确定是否有问题。看起来你有一个完全可以接受的答案，即使用宽度样式强制下拉列表的大小。Lazarus，我担心的是浏览器错误。由于存在bug和兼容性问题，我们花了很长时间才让用户离开IE6。虽然这对用户体验来说并不重要，但却是一件麻烦事。无论如何，我在文章的末尾添加了我的问题。这可以将选项附加到选择框中，但选择框收缩的问题仍然存在。我找到了一份工作，并在下面发布了。