I have some content being loaded asynchronously on a server that runs jQuery 1.3.2

Question

0

Asked: May 24, 20262026-05-24T20:58:17+00:00 2026-05-24T20:58:17+00:00

I have some content being loaded asynchronously on a server that runs jQuery 1.3.2

0

I have some content being loaded asynchronously on a server that runs jQuery 1.3.2

I am trying to hide options in a second select based on values in the first select. I’ve been able to reproduce my problem with this example below.

The example works fine in Firefox. In Chrome, choosing B in the first select will cause the second select’s pull down options to go blank. In IE, no option hiding occurs at all. In Safari, the second select will choose the first option in what should be the visible options, but options that should be hidden are still visible.

Is this a problem in my jQuery code?

This a Jira gadget for anyone familiar. That is why I use .live("change", function()) instead of .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>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-24T20:58:18+00:00

There are 2 problems.

live() doesn’t work with jQuery 1.3.2 and Internet Explorer.
display: none doesn’t work on option elements if the first 20 or so options are all going to be hidden.

I ended up with this, which still doesn’t work in IE unless I use .change() instead of .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());
      }
   });
});

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have some content being loaded asynchronously on a server that runs jQuery 1.3.2

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply