的HTML <select>條件標簽

Question

我有一個簡單的表格，允許用戶添加客戶及其位置（國家，州和城市）。 代碼中似乎存在一個問題，該問題導致在切換國家/地區時下拉表單字段保持不變。 例如，如果用戶選擇China ，然后選擇任何省，然后選擇任何城市，然后切換國家/地區，則城市的下拉菜單仍然保留。 可以在代碼片段中看到。

 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> 

Answer 1

這是解決您的問題的另一種方法。 我不是用HTML手工創建所有select標簽，而是通過buildForms函數使它們成為一個buildForms並使用一種數據結構將所有國家/地區/城市都放在一個位置。 我正在使用buildSelect函數生成所有select標簽，並使用updateStates和updateCities函數隱藏/顯示元素。

 var data = { countries: [{ name: 'China', childs: [{ name: 'Beijing', childs: [{name: 'Beijing'}, {name: 'Dongcheng'}] }, { name: 'Tianjin', childs: [{name: 'Guangzhou'}, {name: 'Shanghai'}] }] }, { name: 'India', childs: [{ name: 'Uttar', childs: [{name: 'Kanpur'}, {name: 'Ghaziabad'}] }, { name: 'Maharashtra', childs: [{name: 'Mumbai'}, {name: 'Pune'}] }] }, { name: 'USA', childs: [{ name: 'Washington', childs: [{name: 'Washington'}, {name: 'Seatle'}] }, { name: 'Florida', childs: [{name: 'Orlando'}, {name: 'Miamy'}] }] }] }; function buildSelect(name, data, childs) { var div = $('<div>'); div.addClass('hidden autoSelect ' + data.name + ' ' + name); var label = $('<label>'); label.text(name); var select = $('<select>'); var option = $('<option>'); option.text('--'); select.append(option); data.childs.forEach(function (child) { option = $('<option>'); option.val(child.name); option.text(child.name); select.append(option); }); if (childs) select.on('change', updateCities); label.append(select); div.append(label); $('.country').append(div); } function buildForms(data) { data.countries.forEach(function (country) { buildSelect('State', country, true); country.childs.forEach(function (state) { buildSelect('City', state); }); }); } function hideAutoSelect (name) { $('div.autoSelect.'+name).addClass('hidden'); } function updateStates() { var v = this.value; if (v) { hideAutoSelect('State'); hideAutoSelect('City'); var div = $('div.autoSelect.'+v); div.removeClass('hidden'); var select = $('select', div); if (select.val()) $('div.autoSelect.'+select.val()).removeClass('hidden'); } } function updateCities() { var v = $(this).val(); if (v) { hideAutoSelect('City'); $('div.autoSelect.'+v).removeClass('hidden'); } } $(document).on('ready',function () { buildForms(data); $('[name=country]').on('change', updateStates); }); 

 .hidden {display: none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 placeholder="0000000"> </label> </div> </div> <div class="top-row"> <div class="field-wrap"> <label>Client name<span class="req">*</span> <input placeholder="John"> </label> </div> </div> <div class="field-wrap"> <label>Client type<span class= "req">*</span> <select> <option selected= "--">--</option> </select> </label> </div> <div class="field-wrap country"> <label>Client Origin<span class="req">*</span> <select name="country"> <option selected= "--">--</option> <option value= "China" >China</option> <option value= "India" >India</option> <option value= "USA" >USA</option> </select> </label> </div> </form> </div> </div>