Question

我在IE7中遇到了jquery和select框的问题。当我设置选择框的宽度，然后使用jquery重新填充第一个选择框更改时的项目时，第二个选择框将根据设置的宽度减少。

例如：以下代码使用两个选择框。当第一个选择框触发更改事件时，它将删除所有第二个选择框并添加一些新值。如果我删除第二个选择框的样式属性，则满足所需的行为。保留style属性后，第二个选择框将变得越来越小，最终消失。

这只发生在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>

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

Answer 1

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

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

Answer 2

你能尝试一下这个吗？

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

Answer 3

在我的情况下，我只是使用CSS hack for IE7，如下所示 -

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

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

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

3 个答案: