2011-08-16 29 views
0

我有一些內容被運行的jQuery 1.3.2問題隱藏在所有瀏覽器使用jQuery除了火狐

服務器我試圖隱藏中的第一個第二選擇基於期權價值上異步加載選項元素選擇。我已經能夠重現我的問題與下面的這個例子。

該示例在Firefox中正常工作。在Chrome中,在第一個選擇中選擇B將導致第二個選擇的下拉選項變爲空白。在IE中,根本不存在選項隱藏。在Safari中,第二個選擇將選擇應該是可見選項的第一個選項,但應該隱藏的選項仍然可見。

這是在我的jQuery代碼有問題嗎?

這是一個吉拉小工具的人熟悉。這就是爲什麼我使用.live("change", function())而不是.change()

<html> 
    <body> 
     <div class="gadget"> 
     <form action="localhost/promotedByTable/go"> 
      <select id="projectId" name="projectId"> 
       <option value="p-10100">A</option> 
       <option value="p-10200">B</option> 
       <option value="p-10300">C</option> 
      </select> 
      <select id="fixVersion" name="fixVersion"> 
       <option value="10100-10400">1</option> 
       <option value="10100-10401">2</option> 
       <option value="10100-10402">3</option> 
       <option value="10100-10403">4</option> 
       <option value="10100-10404">5</option> 
       <option value="10100-10405">6</option> 
       <option value="10100-10406">7</option> 
       <option value="10100-10407">8</option> 
       <option value="10100-10408">9</option> 
       <option value="10100-10409">10</option> 
       <option value="10100-10410">11</option> 
       <option value="10100-10411">12</option> 
       <option value="10100-10412">13</option> 
       <option value="10100-10413">14</option> 
       <option value="10100-10414">15</option> 
       <option value="10100-10415">16</option> 
       <option value="10100-10416">17</option> 
       <option value="10100-10417">18</option> 
       <option value="10100-10418">19</option> 
       <option value="10100-10419">20</option> 
       <option value="10100-10420">21</option> 
       <option value="10100-10421">22</option> 
       <option value="10100-10422">23</option> 
       <option value="10100-10423">24</option> 
       <option value="10100-10424">25</option> 
       <option value="10100-10425">26</option> 
       <option value="10100-10426">27</option> 
       <option value="10100-10427">28</option> 
       <option value="10100-10428">29</option> 
       <option value="10100-10429">30</option> 
       <option value="10100-10430">31</option> 
       <option value="10100-10431">32</option> 
       <option value="10100-10432">33</option> 
       <option value="10100-10433">34</option> 
       <option value="10100-10434">35</option> 
       <option value="10100-10435">36</option> 
       <option value="10100-10436">37</option> 
       <option value="10100-10437">38</option> 
       <option value="10100-10438">39</option> 
       <option value="10100-10439">40</option> 
       <option value="10100-10440">41</option> 
       <option value="10100-10441">42</option> 
       <option value="10100-10442">43</option> 
       <option value="10100-10443">44</option> 
       <option value="10200-10500">1.0</option> 
       <option value="10200-10501">1.1</option> 
       <option value="10200-10502">1.2</option> 
       <option value="10200-10503">1.3</option> 
       <option value="10200-10504">1.4</option> 
       <option value="10200-10505">1.5</option> 
       <option value="10200-10506">1.6</option> 
       <option value="10200-10507">1.7</option> 
       <option value="10200-10508">1.8</option> 
       <option value="10200-10509">1.9</option> 
       <option value="10200-10510">1.10</option> 
       <option value="10200-10511">1.11</option> 
       <option value="10200-10512">1.12</option> 
       <option value="10200-10513">1.13</option> 
       <option value="10200-10514">1.14</option> 
       <option value="10200-10515">1.15</option> 
       <option value="10200-10516">1.16</option> 
       <option value="10200-10517">1.17</option> 
       <option value="10200-10518">1.18</option> 
       <option value="10200-10519">1.19</option> 
       <option value="10200-10520">1.20</option> 
       <option value="10200-10521">1.21</option> 
       <option value="10200-10522">1.22</option> 
       <option value="10200-10523">1.23</option> 
       <option value="10200-10524">1.24</option> 
       <option value="10200-10525">1.25</option> 
       <option value="10200-10526">1.26</option> 
       <option value="10200-10527">1.27</option> 
       <option value="10200-10528">1.28</option> 
       <option value="10200-10529">1.29</option> 
       <option value="10200-10530">1.30</option> 
       <option value="10200-10531">1.31</option> 
       <option value="10200-10532">1.32</option> 
       <option value="10200-10533">1.33</option> 
       <option value="10200-10534">1.34</option> 
       <option value="10200-10535">1.35</option> 
       <option value="10200-10536">1.36</option> 
       <option value="10200-10537">1.37</option> 
       <option value="10200-10538">1.38</option> 
       <option value="10200-10539">1.39</option> 
       <option value="10200-10540">1.40</option> 
       <option value="10200-10541">1.41</option> 
       <option value="10300-10600">3.1</option> 
       <option value="10300-10601">3.4</option> 
       <option value="10300-10602">3.7</option> 
       <option value="10300-10603">4</option> 
       <option value="10300-10604">4.3</option> 
       <option value="10300-10605">4.6</option> 
       <option value="10300-10606">4.9</option> 
       <option value="10300-10607">5.2</option> 
       <option value="10300-10608">5.5</option> 
       <option value="10300-10609">5.8</option> 
       <option value="10300-10610">6.1</option> 
       <option value="10300-10611">6.4</option> 
       <option value="10300-10612">6.7</option> 
       <option value="10300-10613">7</option> 
       <option value="10300-10614">7.3</option> 
       <option value="10300-10615">7.6</option> 
       <option value="10300-10616">7.9</option> 
       <option value="10300-10617">8.2</option> 
       <option value="10300-10618">8.5</option> 
       <option value="10300-10619">8.8</option> 
       <option value="10300-10620">9.1</option> 
       <option value="10300-10621">9.4</option> 
       <option value="10300-10622">9.7</option> 
       <option value="10300-10623">10</option> 
       <option value="10300-10624">10.3</option> 
       <option value="10300-10625">10.6</option> 
       <option value="10300-10626">10.9</option> 
       <option value="10300-10627">11.2</option> 
       <option value="10300-10628">11.5</option> 
       <option value="10300-10629">11.8</option> 
      </select> 
     </form> 
     </div> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
     jQuery(function() { 
      jQuery("form[action*='/promotedByTable/'] #projectId").live("change", function() { 
       var projSelect = jQuery(this); 
       var fixVersion = projSelect.closest("div.gadget").find("#fixVersion"); 
       var firstVisible; 
       fixVersion.find("option").each(function() { 
        var option = jQuery(this); 
        var show = option.attr("value").split("-")[0] == projSelect.val().split("-")[1]; 
        option.toggle(show); 
        if(show && !firstVisible) { 
        firstVisible = option; 
        } 
       }); 
       var none = fixVersion.find("option#no-versions"); 
       if(firstVisible) { 
        none.remove(); 
        fixVersion.val(firstVisible.attr("value")); 
       } 
       else if(none.length) { 
        none.show(); 
        fixVersion.append(none).val(none.text()); 
       } 
       else { 
        none = jQuery("<option id='no-versions'>(Select a project with versions)</option>"); 
        fixVersion.append(none).val(none.text()); 
       } 
      }); 
     }); 
     </script> 
    </body> 
</html> 
+0

有一個[JS小提琴演示]不工作在IE(http://jsfiddle.net/davidThomas/97UVJ /)。 –

+0

大衛,很好。謝謝。 – Kirby

回答

0

有2個問題。

  1. live()doesn't work使用jQuery 1.3.2和Internet Explorer。
  2. display: none如果第一個20個左右的選項都將被隱藏不上選項元素工作。

我結束了這一點,這仍然除非我用.change(),而不是.live('change')

jQuery(function() { 
    jQuery("form[action*='/promotedByTable/'] #projectId").live("change", function() { 
     var projSelect = jQuery(this); 
     var pid = projSelect.val().split("-")[1]; 
     var gadget = projSelect.closest("div.gadget"); 
     var fixVersion = gadget.find("#fixVersion"); 
     var hiddenVersions = gadget.find("#hiddenVersions"); 
     if(!hiddenVersions.length) { 
     hiddenVersions = jQuery("<select id='hiddenVersions' style='display:none;' />").insertAfter(fixVersion); 
     } 
      // hiding options doesn't seem to work except in firefox 
     // instead let's move them to a hidden select 
     fixVersion.find("option").each(function() { 
     hiddenVersions.append(this); 
     }); 
     var firstVisible; 
     hiddenVersions.find("option").each(function() { 
     var option = jQuery(this); 
     if(pid == option.attr("value").split("-")[0]) { 
      fixVersion.append(option); 
      if(!firstVisible) { 
       firstVisible = option; 
      } 
     } 
     }); 
     var none = fixVersion.find("option#no-versions"); 
     if(firstVisible) { 
     none.remove(); 
     } 
     else if(none.length) { 
     fixVersion.append(none).val(none.text()); 
     } 
     else { 
     none = jQuery("<option id='no-versions'>(Select a project with versions)</option>"); 
     fixVersion.append(none).val(none.text()); 
     } 
    }); 
}); 
1

我剛剛發現我的懊惱,選項標籤在大多數新型瀏覽器上都不支持display:none style屬性。我建議檢查一下,看看它是否不能帶領你走向不同的方向。

jQuery filter select options

相關問題