Поле выбора сокращается в IE7, но не в IE6 или IE8 - PullRequest
Новая
       11

Поле выбора сокращается в IE7, но не в IE6 или IE8

5 голосов
/ 15 декабря 2009

У меня проблема в 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>

Как я могу по-прежнему указывать ширину, но при этом поле выбора не может быть уменьшено до нуля? Является ли единственным способом абсолютная ширина в пикселях?

Ответы [ 3 ]

7 голосов
/ 15 декабря 2009

Следующий код получает второе поле выбора, чтобы сохранить правильный размер: 

        $("#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%");
        });
0 голосов
/ 11 ноября 2013

В моем случае я просто использовал CSS-хак для IE7, как показано ниже - 

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

Примечание. Пожалуйста, измените эквивалентную ширину в пикселях.

0 голосов
/ 15 декабря 2009

Вы можете попробовать это? 

$("<option>").attr("value", i).text(i).appendTo("#selTwo");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...