title: How do I display a select dropdown list when one option on another select dropdown is selected
body: <p>I want to display a select element when an option of another select element is selected, and hide it when another option is selected.</p>
  
  <p>To be more specific, I have 3 dropdowns, one for country, one for province/state and one for city. I want the city dropdown to display when the country is United States and the dropdown should be according to the state selected. I also want the city dropdown to disappear when Canada is selected, regardless of the province selected. </p>
  
  <p>So far, I've got the state/provinces to change according to the country, but I don't know how to remove the whole city element when Canada is selected.</p>
  
  <p>I have this in a jsFiddle - <a href="https://jsfiddle.net/jascd6ue/" rel="nofollow">https://jsfiddle.net/jascd6ue/</a></p>
  
  <p>This is my select html code</p>
  
  <pre><code>   Country:
  &lt;select name="country" class="country"&gt;
      &lt;option value="Canada"&gt;Canada&lt;/option&gt;
      &lt;option value="United_States"&gt;United States&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;Province/State:
  &lt;select name="pro" class="pro"&gt;
      &lt;option value="BC"&gt;British Columbia&lt;/option&gt;
      &lt;option value="Ontario"&gt;Ontario&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And this is the Javascript:</p>
  
  <pre><code>$('.country').on('change', function (e) {
  
      var optionSelected = $("option:selected", this);
      var valueSelected = this.value;
  if(valueSelected == "Canada") {
  $('.pro').html('&lt;option value ="BC"&gt;British Columbia&lt;/option&gt;&lt;option value="Ontario"&gt;Ontario&lt;/option&gt;');
      // remove the city &lt;select&gt; dropdown
                 } else if (valueSelected == "United_States") {
  $('.pro ').html('&lt;option value ="FL"&gt;Florida&lt;/option&gt;&lt;option value="NY"&gt;New York&lt;/option&gt;');
  }
  });
  $('.pro').on('change', function (e) {
      var optionSelectedb = $("option:selected", this);
      var valueSelectedb = this.value;
      if(valueSelectedb == "Florida") {
      // write &lt;select name="city" class="city"&gt;&lt;option value="Miami"&gt;Miami&lt;/option&gt;&lt;option value="Orlando"&gt;Orlando&lt;/option&gt; &lt;/select&gt;
      } else if(valueSelectedb == "New York") {
  //    write &lt;select name="city" class="city"&gt;&lt;option value="New York"&gt;New York&lt;/option&gt;&lt;option value="Buffalo"&gt;Buffalo&lt;/option&gt;&lt;/select&gt;
      }   
  });
  </code></pre>
  
  <p>Any and all help is appreciated. Thanks</p>