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