title: Dynamically remove A LOT of <options> from <select>
body: <p>Does anyone have any solution to improve the speed when deleting/adding <code>&lt;option&gt;</code> from a <code>&lt;select&gt;</code> when it has 60k+ elements?</p>
  
  <p>I've a form with two <code>&lt;select&gt;</code>, let's call them <code>selectA</code> and <code>selectB</code>. I want the values of <code>selectB</code> to change when <code>selectA</code> is changed. Like (code not functional, just for idea):</p>
  
  <pre><code>if selectA = option1
      then selectB.options = [opt1_1, opt1_2, opt1_3, ...]
  else if selectA = option2
      then selectB.options = [opt2_1, opt2_2, opt2_3, ...]
  ...
  </code></pre>
  
  <p>I have a (quite huge) variable that gives me the list of option for selectB associated with selectA value.
  I've found many example for that kind of thing and it works on small examples. For now, I've something like : </p>
  
  <pre><code>$(document).ready(function() {
      $("#selectB").html("&lt;option value='' slected='selected'&gt;Choose SelectA first&lt;/option&gt;");
      $("#selectA").change(function() {
          var val = $(this).val();
          var options = //... string generated with all &lt;option&gt;&lt;/options&gt; depending on $val
          $("#selectB").html(options)
      });
  });
  </code></pre>
  
  <p>Here comes the mess, as <code>selectB</code> is a list of IPv4 that can contain a full /16. So that's 60k+ elements to handle (ouch ^^ ). And that's why I don't want to have every option in the select but instead "pre-select" with selectA and then "sub-select" with selectB.</p>
  
  <p>I want to have all possible IPs initially in the HTML form because of the following reason : Even if JS is not enabled, the user must be able to choose one IP (the server checks that the choice from selectA and selectB corresponds). And only if JS is enabled I remove everything from selectB and add only the values I want when selectA is changed. So you might say that anyway a user with no JS can't event choose an option without loading 1GB+ RAM of options and wait 5-10 min for every option to be loaded, but I also want the page to works if there is only a few options to display like 1k.</p>
  
  <p>I've to admit I was amazed my browser (FF) handles the creation of the page quite quickly. But when JS delete all the options, everything freezes on :</p>
  
  <pre><code>$("#selectB").html("&lt;option value='' slected='selected'&gt;Choose SelectA first&lt;/option&gt;");
  </code></pre>
  
  <p>What I've managed to debug is that what takes time is when the browser needs to unload/delete every options. Actually creating them is not that slow.</p>
  
  <p>So I would like to know if there is a faster solution than what I'm doing right now. How can I speed up the deletion of all <code>&lt;option&gt;</code> in selectB ?</p>
  
  <p>Any suggestion is welcome from a simple change in JS to change the whole structure of HTML to not use <code>&lt;select&gt;</code> but something else (I don't know).</p>