javascript - HTML <select> 和 <option> 条件标签

Question

我正在创建一个在线表单，允许用户将业务客户输入数据库 - 没有什么复杂的。根据为第一个问题(国家)选择的答案，随后会出现一个下拉菜单，提示用户选择一个省/州，然后是另一个下拉菜单，提示用户选择该省/州内的一个城市。

到目前为止，所有调节都不起作用。第一个问题显示国家选择的下拉列表，但选择任何选项都不会提示任何其他问题。

    <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

我看到的主要问题是 onchange处理程序应绑定(bind)到 <select>元素而不是 <option>元素。

似乎还有一个nested <form> ，这可能会导致问题。

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>