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

Question

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

我在使用jquery和选择框的IE7中遇到问题.当我设置选择框的宽度,然后使用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>

Run Code Online (Sandbox Code Playgroud)

我怎样才能指定宽度,但不能将选择框缩小到空？绝对宽度是像素的唯一方法吗？

Answer 1

Sco*_*ott 7

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，2 月前
查看次数：	2807 次
最近记录：	12 年，3 月前