title: How to dynamically hide some options from a drop-down list using jQuery
body: <p>
  I have two drop down list; one with states and the other with cities. I want the second list with cities to show only the cities in the selected state. Why is this not working?</p>
  
  
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function($) {
    $("#state").change(function() {
      var selected_state = $("#state").val(); //get the selected state
      $("#city").children().hide(); //hide all the options
      $("#selected_state").children().show(); //only show cities in selected state
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form method="post"&gt;
    State: &lt;select name="state" id="state"&gt;
              &lt;option value="state1"&gt;State1&lt;/option&gt;
              &lt;option value="state2"&gt;State2&lt;/option&gt;
          &lt;/select&gt; City:
    &lt;select name="city" id="city"&gt;
              &lt;div id="state1"&gt;
                 &lt;option value="0"&gt;City1a&lt;/option&gt;
                 &lt;option value="1"&gt;City1b&lt;/option&gt;
                 &lt;option value="2"&gt;City1c&lt;/option&gt;
              &lt;/div&gt;
              &lt;div id="state2"&gt;
                 &lt;option value="3"&gt;City2a&lt;/option&gt;
                 &lt;option value="4"&gt;City2b&lt;/option&gt;
                 &lt;option value="5"&gt;City2c&lt;/option&gt;
              &lt;/div&gt;
          &lt;/select&gt;
    &lt;input name="submit" type="submit" value="Submit" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>