HTML <select> conditional tag

Question

I have a simple form that allows users to add clients and their locations (country, state, and city). There seems to be a problem in the code that causes the drop-down form fields to remain in place when the country is switched. For example, if the user selects China , followed by any Province, and then any city, and then switches the country, the drop--down for city still remains. This can be seen in the code snippet.

 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

This is another approach to your problem. Instead of creating all select tags in HTML by hand, I'm making them with a function buildForms and using a data structure to keep all countries/states/cities in one place. I'm using the buildSelect function to produce all select tags and the functions updateStates and updateCities to hide/show the elements.

 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>