HTML <select> and <option> conditional tag

Question

I am creating an online form that allows a user to enter a business client into a database- nothing complicated. Depending on the answer selected for the first question (the country), a consequent dropdown should appear prompting the user to select a Province/State, followed by yet another dropdown prompting the user to select a city within that Province/State.

So far, none of the conditioning works. The first question displays a dropdown for the country selection, but selecting any option does not prompt any additional questions.

    <script>
    
    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"; }
    }
    
    </script>
     
     <!-- ############################################################################-->
    
    <div class="container">
        <h3>Add Client</h3>  
            <div class="tab-content">         
                <form action="/add/clients" method="post">
            <!-- ################################ Client ID ################################-->
                  <div class="top-row">
                    <div class="field-wrap">
                    <label>
                      Client ID<span class="req">*</span>
                      <input>
                    </label>
                    </div>
                  </div>
      <!-- ################################ Client name #############################-->
                  <div class="top-row">
                    <div class="field-wrap">
                    <label>
                      Client name<span class="req">*</span>
                      <input>
                    </label>
                    </div>
                  </div>
    
        <!-- ############################## Client type ##############################-->
                  <div class="field-wrap">
                    <label>
                      Client type<span class= "req">*</span>
                    <select>
                    <!--Removed for simplicity -->
                    </select></label>
                  </div>             
        <!-- ########################### Client location #############################-->
                  <div class="field-wrap">
                    <form name="feedback" action= "javascript:void(0)">
                      <label>Client Origin<span class="req">*</span>
                        <select name= "country">
                          <option selected= "--">--</option>
                          <option value= "China" onchange= "displayCountry(this.value)" value= "China">China</option>
                          <option value= "India" onchange= "displayCountry(this.value)" value= "India">India</option>
                          <option value= "USA" onchange= "displayCountry(this.value)" value= "USA">USA</option>
                        </select>
                      </label>
    
                      <div id= "China" style= "display:none;"><br/>
                        Select Province<span class="req">*</span>
                        <select name= "province">
                          <option selected= "--">--</option>
                          <option value= "Beijing Municipality" onchange= "displayProvince(this.value)" value= "Beijing Municipality">Beijing Municipality></option>
                          <option value= "Tianjin Municipality" onchange= "displayProvince(this.value)" value= "Tianjin Municipality">Tianjin Municipality></option>
                          <!--More options removed for simplicity -->
    
                        </select>
                      </div>
                      <div id= "Beijing Municipality" style= "display:none;"><br/>
                        Select City<span class="req">*</span>
                        <select name= "city">
                          <option selected= "--">--</option>
                          <option value= "Beijing" onchange= "displayChinaCity(this.value)" value= "Beijing">Beijing</option>
                          <option value= "Dongcheng" onchange= "displayChinaCity(this.value)" value= "Dongcheng">Dongcheng</option>
                          <!--More options removed for simplicity-->
                        </select>
                      </div>
                      <!--divs for other cities,provinces,and countries omitted for simplicity-->
                    </form>
                  </div> 
          </form>
        </div>
    </div>

Answer 1

The main issue I see is that the onchange handlers should be bound to the <select> elements rather than the <option> elements.

There also seems to be a nested <form>, which might cause problems.

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";
  }
}

<div class="container">
  <h3>Add Client</h3>
  <div class="tab-content">
    <form action="/add/clients" method="post">

      <div class="top-row">
        <div class="field-wrap">
          <label>Client ID<span class="req">*</span><input></label>
        </div>
      </div>

      <div class="top-row">
        <div class="field-wrap">
          <label>Client name<span class="req">*</span><input></label>
        </div>
      </div>

      <div class="field-wrap">
        <label>Client type<span class= "req">*</span><select></select></label>
      </div>


      <div class="field-wrap">
      
        <label>Client Origin<span class="req">*</span>
          <select name="country" onchange="displayCountry(this.value)">
            <option selected= "--">--</option>
            <option value= "China" >China</option>
            <option value= "India" >India</option>
            <option value= "USA"  >USA</option>
          </select>
        </label>

        <div id="USA" style="display:none;">
          <select></select>
        </div>

        <div id="China" style="display:none;"><br/>
          Select Province<span class="req">*</span>
          <select name="province" onchange="displayProvince(this.value)">
            <option selected= "--">--</option>
            <option value= "Beijing Municipality" >Beijing Municipality</option>
            <option value= "Tianjin Municipality">Tianjin Municipality</option>
          </select>
        </div>
        
        <div id="India" style="display:none;">
          <select></select>
        </div>

        <div id="Beijing Municipality" style="display:none;"><br/>
          Select City<span class="req">*</span>
          <select name="city" onchange="displayChinaCity(this.value)">
            <option selected= "--">--</option>
            <option value= "Beijing">Beijing</option>
            <option value= "Dongcheng">Dongcheng</option>
          </select>
        </div>

      </div>
    </form>
  </div>
</div>