2009-12-15 3 views
5

У меня проблема с IE7 с jquery и select box. Когда я устанавливаю ширину окна выбора, а затем использую jquery для повторного заполнения элементов при изменении первого окна выбора, второе поле выбора уменьшается на основе заданной ширины.Выберите коробку в IE7, но не IE6 или IE8

Например: В следующем коде используются два блока. Когда в первом окне выбора появляется событие изменения, оно удалит все второе поле выбора и добавит некоторые новые значения. Если я удалю атрибут стиля для второго блока выбора, то будет выполнено требуемое поведение. Когда атрибут стиля остается включенным, второй флажок выбора будет становиться все меньше и меньше и в итоге просто исчезнет.

Это происходит только в 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> 

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

+0

Похож на ошибку браузера, не уверен, что ваш вопрос, или даже если есть. Похоже, у вас есть вполне приемлемый ответ, т. Е. Используйте стиль ширины, чтобы заставить размер выпадающего списка. – Lazarus

+0

Lazarus, ошибка браузера - это то, чего я боюсь. У нас было чертовски время, когда наши пользователи отключились от IE6 из-за ошибок и проблем совместимости. Хотя это не критично для пользователя, это раздражает. В любом случае, я добавил свой вопрос в конце сообщения. – Scott

ответ

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%"); 
     }); 
0

Можете ли вы попробовать это?

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

Это работает с тем, чтобы добавить этот параметр в поле выбора, но проблема с сокращением окна выбора остается. Я нашел работу и разместил ее ниже. – Scott

0

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

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

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

Смежные вопросы