HTML <select>和<option>条件标记

Question

我正在创建一个在线表单，允许用户将业务客户端输入数据库 - 没有什么复杂的。根据为第一个问题（国家/地区）选择的答案，应显示随后的下拉菜单，提示用户选择省/州，然后是另一个下拉菜单，提示用户选择该省/州内的城市。 到目前为止，没有任何调节工作。第一个问题显示国家/地区选择的下拉列表，但选择任何选项不会提示任何其他问题。 ＆＃13; ＆＃13;     ＆LT;脚本＆GT;＆＃13;     ＆＃13;     function displayCountry（answer）{＆＃13;       document.getElementById（answer）.style.display =＆＃34; block＆＃34 ;;＆＃13;       if（answer ==＆＃34; China＆＃34;）{＆＃13;         document.getElementById（＆＃34; India＆＃34;）。style.display =＆＃34; none＆＃34 ;;＆＃13;         document.getElementById（＆＃34; USA＆＃34;）。style.display =＆＃34; none＆＃34 ;; }＆＃13;       否则如果（回答==＆＃34;印度＆＃34;）{＆＃13;         document.getElementById（＆＃34; China＆＃34;）。style.display =＆＃34; none＆＃34 ;;＆＃13;         document.getElementById（USA）.style.display =＆＃34; none＆＃34 ;; }＆＃13;       否则如果（回答==＆＃34; USA＆＃34;）{＆＃13;         document.getElementById（＆＃34; China＆＃34;）。style.display =＆＃34; none＆＃34 ;;＆＃13;         document.getElementById（＆＃34; India＆＃34;）。style.display =＆＃34; none＆＃34 ;; }＆＃13;     }＆＃13;     ＆＃13;     function displayProvince（answer）{＆＃13;       document.getElementById（answer）.style.display =＆＃34; block＆＃34 ;;＆＃13;       if（answer ==＆＃34; Beijing Municipality＆＃34;）{＆＃13;         document.getElementById（＆＃34; Tianjin Municipality＆＃34;）。style.display =＆＃34; none＆＃34 ;; }＆＃13;     ＆＃13;       否则如果（回答==＆＃34;天津市＆＃34;）{＆＃13;         document.getElementById（＆＃34; Beijing Municipality＆＃34;）。style.display =＆＃34; none＆＃34 ;; }＆＃13;     }＆＃13;     ＆＃13;     功能displayChinaCity（回答）{＆＃13;       document.getElementById（answer）.style.display =＆＃34; block＆＃34 ;;＆＃13;       if（answer ==＆＃34; Beijing＆＃34;）{＆＃13;         document.getElementById（＆＃34; Dongcheng＆＃34;）。style.display =＆＃34; none＆＃34 ;; }＆＃13;     ＆＃13;       否则如果（回答==＆＃34;东城＆＃34;）{＆＃13;         document.getElementById（＆＃34; Beijing＆＃34;）。style.display =＆＃34; none＆＃34 ;; }＆＃13;     }＆＃13;     ＆＃13;     ＆LT; /脚本＆GT;＆＃13;      ＆＃13;      ＆lt;！ - ############################################# ############################### - ＆GT;＆＃13;     ＆＃13;     ＆lt; div class =＆＃34; container＆＃34;＆gt;＆＃13;         ＆lt; h3＆gt;添加客户端＆lt; / h3＆gt; ＆＃13;             ＆lt; div class =＆＃34; tab-content＆＃34;＆gt; ＆＃13;                 ＆lt; form action =＆＃34; / add / clients＆＃34;方法=＆＃34;后＆＃34;＆GT;＆＃13;             ＆lt;！ - ################################客户ID ########### ##################### - ＆GT;＆＃13;                   ＆lt; div class =＆＃34; top-row＆＃34;＆gt;＆＃13;                     ＆lt; div class =＆＃34; field-wrap＆＃34;＆gt;＆＃13;                     ＆LT;标签＆gt;＆＃13;                       客户ID＆lt; span class =＆＃34; req＆＃34;＆gt; *＆lt; / span＆gt;＆＃13;                       ＆LT;输入＆GT;＆＃13;                     ＆LT; /标签＆gt;＆＃13;                     ＆LT; / DIV＆GT;＆＃13;                   ＆LT; / DIV＆GT;＆＃13;       ＆lt;！ - ################################客户名称########### ################## - ＆GT;＆＃13;                   ＆lt; div class =＆＃34; top-row＆＃34;＆gt;＆＃13;                     ＆lt; div class =＆＃34; field-wrap＆＃34;＆gt;＆＃13;                     ＆LT;标签＆gt;＆＃13;                       客户名称＆lt; span class =＆＃34; req＆＃34;＆gt; *＆lt; / span＆gt;＆＃13;                       ＆LT;输入＆GT;＆＃13;                     ＆LT; /标签＆gt;＆＃13;                     ＆LT; / DIV＆GT;＆＃13;                   ＆LT; / DIV＆GT;＆＃13;     ＆＃13;         ＆lt;！ - ##############################客户类型############# ################# - ＆GT;＆＃13;                   ＆lt; div class =＆＃34; field-wrap＆＃34;＆gt;＆＃13;                     ＆LT;标签＆gt;＆＃13;                       客户类型＆lt; span class =＆＃34; req＆＃34;＆gt; *＆lt; / span＆gt;＆＃13;                     ＆LT;选择＆GT;＆＃13;                     ＆lt;！ - 为简单而删除 - ＆gt;＆＃13;                     ＆LT; /选择＆GT;＆LT; /标签＆gt;＆＃13;                   ＆LT; / DIV＆GT; ＆＃13;         ＆lt;！ - ###########################客户位置################ ############# - ＆GT;＆＃13;                   ＆lt; div class =＆＃34; field-wrap＆＃34;＆gt;＆＃13;                     ＆lt; form name =＆＃34;反馈＆＃34; action =＆＃34; javascript：void（0）＆＃34;＆gt;＆＃13;                       ＆lt; label＆gt;客户来源＆lt; span class =＆＃34; req＆＃34;＆gt; *＆lt; / span＆gt;＆＃13;                         ＆lt; select name =＆＃34; country＆＃34;＆gt;＆＃13;                           ＆lt;选择选项=＆＃34; - ＆＃34;＆gt; - ＆lt; /选项＆gt;＆＃13;                           ＆lt; option value =＆＃34; China＆＃34; onchange =＆＃34; displayCountry（this.value）＆＃34; value =＆＃34; China＆＃34;＆gt; China＆lt; / option＆gt;＆＃13;                           ＆lt; option value =＆＃34; India＆＃34; onchange =＆＃34; displayCountry（this.value）＆＃34;值=＆＃34;印度＆＃34;＆gt;印度＆lt; /选项＆gt;＆＃13;                           ＆lt; option value =＆＃34; USA＆＃34; onchange =＆＃34; displayCountry（this.value）＆＃34; value =＆＃34; USA＆＃34;＆gt; USA＆lt; / option＆gt;＆＃13;                         ＆LT; /选择＆GT;＆＃13;                       ＆LT; /标签＆gt;＆＃13;     ＆＃13;                       ＆lt; div id =＆＃34; China＆＃34; style =＆＃34; display：none;＆＃34;＆gt;＆lt; br /＆gt;＆＃13;                         选择省＆lt; span class =＆＃34; req＆＃34;＆gt; *＆lt; / span＆gt;＆＃13;                         ＆lt; select name =＆＃34; province＆＃34;＆gt;＆＃13;                           ＆lt;选择选项=＆＃34; - ＆＃34;＆gt; - ＆lt; /选项＆gt;＆＃13;                           ＆lt; option value =＆＃34;北京市＆＃34; onchange =＆＃34; displayProvince（this.value）＆＃34; value =＆＃34; Beijing Municipality＆＃34;＆gt; Beijing Municipality＆gt;＆lt; / option＆gt;＆＃13;                           ＆lt; option value =＆＃34;天津市＆＃34; onchange =＆＃34; displayProvince（this.value）＆＃34;值=＆＃34;天津市＆＃34;＆gt;天津市＆gt;＆lt; / option＆gt;＆＃13;                           ＆lt;！ - 为简单起见删除了更多选项 - ＆gt;＆＃13;     ＆＃13;                         ＆LT; /选择＆GT;＆＃13;                       ＆LT; / DIV＆GT;＆＃13;                       ＆lt; div id =＆＃34;北京市＆＃34; style =＆＃34; display：none;＆＃34;＆gt;＆lt; br /＆gt;＆＃13;                         选择城市＆lt; span class =＆＃34; req＆＃34;＆gt; *＆lt; / span＆gt;＆＃13;                         ＆lt; select name =＆＃34; city＆＃34;＆gt;＆＃13;                           ＆lt;选择选项=＆＃34; - ＆＃34;＆gt; - ＆lt; /选项＆gt;＆＃13;                           ＆lt; option value =＆＃34; Beijing＆＃34; onchange =＆＃34; displayChinaCity（this.value）＆＃34;值=＆＃34;北京＆＃34;＆gt;北京＆lt; /选项＆gt;＆＃13;                           ＆lt; option value =＆＃34; Dongcheng＆＃34; onchange =＆＃34; displayChinaCity（this.value）＆＃34;值=＆＃34;东城＆＃34;＆gt;东城＆lt; /选项＆gt;＆＃13;                           ＆lt;！ - 为简单起见删除了更多选项 - ＆gt;＆＃13;                         ＆LT; /选择＆GT;＆＃13;                       ＆LT; / DIV＆GT;＆＃13;                       ＆lt;！ - 为简单而省略的其他城市，省和国家的div - ＆gt;＆＃13;                     ＆LT; /形式＆GT;＆＃13;                   ＆LT; / DIV＆GT; ＆＃13;           ＆LT; /形式＆GT;＆＃13;         ＆LT; / DIV＆GT;＆＃13;     ＆LT; / DIV＆GT;＆＃13; ＆＃13; ＆＃13;

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;