在IE7中選擇框縮小，但不是IE6或IE8

我在使用jQuery和選擇框的IE7中遇到問題。當我設置選擇框的寬度，然後使用jquery重新填充第一個選擇框更改時的項目時，第二個選擇框將根據設置的寬度縮小。在IE7中選擇框縮小，但不是IE6或IE8

例如：以下代碼使用兩個選擇框。當第一個選擇框觸發更改事件時，它將刪除所有第二個選擇框並添加一些新值。如果我刪除第二個選擇框的樣式屬性，則會滿足所需的行爲。隨着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>

如何我還可以指定一個寬度，但沒有選擇框縮小到什麼？唯一的方法是以像素爲單位的絕對寬度？

來源

2009-12-15 Scott

看起來像一個瀏覽器錯誤，不知道你的問題是什麼，或者即使有問題。看起來你有一個完全可以接受的答案，即使用寬度樣式來強制下拉的大小。 – Lazarus 2009-12-15 16:36:43

拉撒路，一個瀏覽器的bug是我害怕的。由於缺陷和兼容性問題，我們曾經讓我們的用戶關閉IE6。雖然這對用戶體驗並不重要，但這是一個煩惱。無論如何，我在帖子末尾添加了我的問題。 – Scott 2009-12-15 17:00:21

下面的代碼可以得到第二個選擇框停留在正確的大小：

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

來源

2009-12-15 17:31:28 Scott

你可以試試這個嗎？

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

來源

2009-12-15 17:32:12 jitter

這可以將選項附加到選擇框，但選擇框收縮的問題仍然存在。我找到了一個工作，並在下面發佈。 – Scott 2009-12-15 19:25:28

在我而言，我只是用CSS破解了IE7像下面 -

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

注：請更改爲等效寬度像素。

來源

2013-11-11 10:10:31

在IE7中選擇框縮小，但不是IE6或IE8

回答

相關問題