title: Creating multiple select list options on the fly and reducing is subsequent select lists
body: <p>I have been trying to solve the following problem for the last week or so, and after many searches around the internet, and on here, haven't found an exact solution for what I am trying to achieve.</p>
  
  <p>This is my first post on here, and decided to post here as this forum has saved my bacon several times!</p>
  
  <p>This is what I would like to happen:</p>
  
  <p>User selects the number of scouts and leaders from the dropdowns.
  The first tshirts (small) is populated with the number of leaders + scouts total.</p>
  
  <p>if the user selects a lesser amount from the small dropdown, then the remaining amount is used to populate the medium select list, and so on upto XXL.</p>
  
  <p>The following bit of code is how far I have got so far, but it seems a bit buggy, the option values append again and again if the user changes their mind, and the medium box is showing the total options rather that total - amount of small selected.</p>
  
  <p>I don't know if this is the best way or if there are any better solutions?</p>
  
  <p>Here goes</p>
  
  <pre><code>&lt;form method='post' id="wawBooking" action='processWAWBooking.php' &gt;
      &lt;div id="groupDetails" &gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Group Details&lt;/legend&gt;
              &lt;label for="noScouts"&gt;Number of scouts:&lt;/label&gt;
              &lt;select id='noScouts' name="noScouts"&gt;&lt;/select&gt;&lt;br /&gt;
              &lt;label for="noLeaders"&gt;Number of leaders:&lt;/label&gt;
              &lt;select id='noLeaders' name="noLeaders"&gt;&lt;/select&gt;&lt;br /&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;div style="clear: both;"&gt;&lt;/div&gt;
      &lt;div id="tshirts"&gt;
          &lt;fieldset style="height: auto;"&gt;
              &lt;legend&gt;T-Shirts&lt;/legend&gt;
              Total: &lt;span id='totalTshirts'&gt;&lt;/span&gt;&lt;br /&gt;
              Amount left (Total - current total): &lt;span id='amountLeft'&gt;&lt;/span&gt;&lt;br /&gt;
              Sum of Selected: &lt;span id='liveTotal'&gt;&lt;/span&gt;&lt;br /&gt;
              &lt;label for='s'&gt;Small&lt;/label&gt;
              &lt;select id='s'&gt;&lt;/select&gt;&lt;br /&gt;
              &lt;label for='m'&gt;Medium&lt;/label&gt;
              &lt;select id='m'&gt; &lt;/select&gt;&lt;br /&gt;
              &lt;label for='l'&gt;Large&lt;/label&gt;
              &lt;select id='l'&gt;&lt;/select&gt;&lt;br /&gt;
              &lt;label for='xl'&gt;X-Large&lt;/label&gt;
              &lt;select id='xl'&gt;&lt;/select&gt;&lt;br /&gt;
              &lt;label for='xxl'&gt;XX-Large&lt;/label&gt;
              &lt;select id='xxl'&gt;&lt;/select&gt;&lt;br /&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;input type="reset" value="Reset Form" id="reset" style="float: left;"/&gt;
      &lt;input type="button" value="Order t-shirts" id="tshirtOrder" style="float: right;"/&gt;
      &lt;input type="submit" value="Submit Booking" style="float: right;"/&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
      var scouts = 20;
      var leaders = 30;
  
      // ignore this bit - using just to demonstrate
      for (a = 0; a &lt;= leaders; a++) {
          $('#noScouts').append("&lt;option value='" + a + "'&gt;" + a + "&lt;/option&gt;");
      }
      for (b = 0; b &lt;= scouts; b++) {
          $('#noLeaders').append("&lt;option value='" + b + "'&gt;" + b + "&lt;/option&gt;");
      }
      // end of ignore section!
  
      $('#wawBooking').change(function(){
          var totalTshirts = parseInt($('#noLeaders').val()) + parseInt($('#noScouts').val());
          var liveTotal = parseInt($('#s').val())
                        + parseInt($('#m').val()) 
                        + parseInt($('#l').val()) 
                        + parseInt($('#xl').val()) 
                        + parseInt($('#xxl').val());
          if ($('#noScouts').val() &amp;&amp; $('#noLeaders').val() &gt; 0) {
              $('#totalTshirts').empty().append(totalTshirts);
              $('#liveTotal').empty().append(liveTotal);
              for (i = 0; i &lt;= totalTshirts; i++) {
                  $('#s').append('&lt;option value="' + i + '"&gt;' + i + '&lt;/option&gt;')
              }
              if ($('#s').val() &gt; 0 &amp;&amp; $('#s').val() &lt; totalTshirts) {
                  var subSmallMinusTotal = parseInt(totalTshirts) - parseInt($('#s').val());
                  for (k = 0; k &lt;= subSmallMinusTotal; k++) {
                      $('#m').append('&lt;option value="' + k + '"&gt;' + k  + '&lt;/option&gt;')
                  }           
              }
          } 
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Any suggestions or tips?</p>
  
  <p>Many thanks in advance</p>
  
  <p>Chris</p>