title: HTML <select> conditional tag
body: <p>I have a simple form that allows users to add clients and their locations (country, state, and city). There seems to be a problem in the code that causes the drop-down form fields to remain in place when the country is switched. For example, if the user selects <em>China</em>, followed by any Province, and then any city, and then switches the country, the drop--down for <em>city</em> still remains. This can be seen in the code snippet. </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>function displayCountry(answer) {
    document.getElementById(answer).style.display = "block";
    if (answer == "China") {
      document.getElementById("India").style.display = "none";
      document.getElementById("USA").style.display = "none";
    } else if (answer == "India") {
      document.getElementById("China").style.display = "none";
      document.getElementById("USA").style.display = "none";
    } else if (answer == "USA") {
      document.getElementById("China").style.display = "none";
      document.getElementById("India").style.display = "none";
    }
  }
  
  function displayProvince(answer) {
    document.getElementById(answer).style.display = "block";
    if (answer == "Beijing Municipality") {
      document.getElementById("Tianjin Municipality").style.display = "none";
    } else if (answer == "Tianjin Municipality") {
      document.getElementById("Beijing Municipality").style.display = "none";
    }
  }
  
  function displayChinaCity(answer) {
    document.getElementById(answer).style.display = "block";
    if (answer == "Beijing") {
      document.getElementById("Dongcheng").style.display = "none";
    } else if (answer == "Dongcheng") {
      document.getElementById("Beijing").style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h3&gt;Add Client&lt;/h3&gt;
    &lt;div class="tab-content"&gt;
      &lt;form action="/add/clients" method="post"&gt;
  
        &lt;div class="top-row"&gt;
          &lt;div class="field-wrap"&gt;
            &lt;label&gt;Client ID&lt;span class="req"&gt;*&lt;/span&gt;&lt;input&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="top-row"&gt;
          &lt;div class="field-wrap"&gt;
            &lt;label&gt;Client name&lt;span class="req"&gt;*&lt;/span&gt;&lt;input&gt;&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="field-wrap"&gt;
          &lt;label&gt;Client type&lt;span class= "req"&gt;*&lt;/span&gt;&lt;select&gt;&lt;/select&gt;&lt;/label&gt;
        &lt;/div&gt;
  
  
        &lt;div class="field-wrap"&gt;
        
          &lt;label&gt;Client Origin&lt;span class="req"&gt;*&lt;/span&gt;
            &lt;select name="country" onchange="displayCountry(this.value)"&gt;
              &lt;option selected= "--"&gt;--&lt;/option&gt;
              &lt;option value= "China" &gt;China&lt;/option&gt;
              &lt;option value= "India" &gt;India&lt;/option&gt;
              &lt;option value= "USA"  &gt;USA&lt;/option&gt;
            &lt;/select&gt;
          &lt;/label&gt;
  
          &lt;div id="USA" style="display:none;"&gt;
            &lt;select&gt;&lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div id="China" style="display:none;"&gt;&lt;br/&gt;
            Select Province&lt;span class="req"&gt;*&lt;/span&gt;
            &lt;select name="province" onchange="displayProvince(this.value)"&gt;
              &lt;option selected= "--"&gt;--&lt;/option&gt;
              &lt;option value= "Beijing Municipality" &gt;Beijing Municipality&lt;/option&gt;
              &lt;option value= "Tianjin Municipality"&gt;Tianjin Municipality&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          
          &lt;div id="India" style="display:none;"&gt;
            &lt;select&gt;&lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div id="Beijing Municipality" style="display:none;"&gt;&lt;br/&gt;
            Select City&lt;span class="req"&gt;*&lt;/span&gt;
            &lt;select name="city" onchange="displayChinaCity(this.value)"&gt;
              &lt;option selected= "--"&gt;--&lt;/option&gt;
              &lt;option value= "Beijing"&gt;Beijing&lt;/option&gt;
              &lt;option value= "Dongcheng"&gt;Dongcheng&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>