проблемы со скрытием элементов option с использованием jQuery во всех браузерах, кроме Firefox - PullRequest
Новая
       21

проблемы со скрытием элементов option с использованием jQuery во всех браузерах, кроме Firefox

0 голосов
/ 17 августа 2011

У меня есть контент, загружаемый асинхронно на сервере, на котором работает jQuery 1.3.2

Я пытаюсь скрыть параметры во втором выборе, основываясь на значениях в первом выборе. Я смог воспроизвести мою проблему с помощью этого примера ниже.

Пример отлично работает в Firefox. В Chrome выбор B в первом выборе приведет к тому, что опции второго выбора станут пустыми. В IE скрытие опций не происходит вообще. В Safari второй выбор выберет первый вариант в том, что должно быть видимыми, но параметры, которые должны быть скрыты, все еще видны.

Это проблема в моем коде jQuery?

Это гаджет Jira для всех, кто знаком. Вот почему я использую .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>

Ответы [ 2 ]

1 голос
/ 17 августа 2011

Я только недавно обнаружил, к своему огорчению, что тег option не поддерживает атрибут display: none style в большинстве современных браузеров. Я бы порекомендовал проверить это и посмотреть, не может ли это привести вас в другом направлении.

Параметры фильтра jQuery

0 голосов
/ 17 августа 2011

Есть 2 проблемы.

  1. live() не работает с jQuery 1.3.2 и Internet Explorer.
  2. display: none не работает с элементами опций, если первый20 или около того вариантов будут скрыты.

Я закончил с этим, который все еще не работает в IE, если я не использую .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());
      }
   });
});
...