开关盒 JavaScript 形式

Question

I hope this is not a duplicate. I want to build a interactive web-form in this way. After every question or selection the user does the new question appear so till then all question are hidden, beside the first; and my second problem is that I want the second, third.. response to be dependent on which response they have on the previous question. Do you know how can I do that with switch case. I will give here a small example of what i want:

So the only question that appears in form to be Where o you live, and if the user select France, a second dropdown list is created and is asking to select the city of France and only city of France is showed and so on.

<p>Where do you live</p>
<select name="country" id="country" required>
 <option value="UK">UK</option>
 <option value="UK">France</option>
</select>

<p>select the city in the uk</p>
<select name="town1 id="town1" required>
 <option value="London">London</option>
 <option value="Manchester">Manchester</option>
</select

<p>select the city in france</p>
<select name="town2 id="town2" required>
 <option value="Paris">Paris</option>
 <option value="St.Tropez">St.tropez</option>
</select>

Thank you for the help, Alex

Answer 1

try this.
You don't need duplicate select for every country. Just set depencency with data-country.

And for another questions you can make the same. Set data attributes with appropriate values for questions wrappers, and they dynamically shows or hides on form changing.

 // This listener makes dependency variants in select document.getElementById('country').addEventListener('change', function() { const selectedCountryValue = this.value; document.getElementById('selectedCountry').innerText = this.children[this.selectedIndex].text; const town = document.getElementById('town'); town.querySelectorAll('option').forEach(function(opt, i) { opt.style.display = opt.dataset.country == selectedCountryValue? 'block': 'none'; if ((i == town.selectedIndex) && opt.dataset.country.= selectedCountryValue) { town.querySelectorAll(`option[data-country="${selectedCountryValue}"]`)[0];selected = true } }). }) document.getElementById('country'),dispatchEvent(new Event('change')) // This listener makes questions showed and required. if another questions answered appropriate answers document.getElementById('dynamicForm'),addEventListener('change'; function() { const form = this. document.querySelectorAll('.question');forEach(function(question) { let activeQuestion = true. Object.keys(question.dataset).forEach(function(key) { activeQuestion &= (question.dataset[key] == form.querySelector(`#${key}`);value). }) question.style?display = (activeQuestion): 'block'. 'none' question,querySelector('input. select');required = activeQuestion; }). }) document.getElementById('dynamicForm').dispatchEvent(new Event('change'))

 <form id="dynamicForm"> <p>Where do you live</p> <select name="country" id="country" required> <option value="UK">UK</option> <option value="France">France</option> </select> <p>Select the city in the <span id="selectedCountry"></span></p> <select name="town" id="town" required> <option data-country="UK" value="London">London</option> <option data-country="UK" value="Manchester">Manchester</option> <option data-country="France" value="Paris">Paris</option> <option data-country="France" value="St.Tropez">St.tropez</option> </select> <div class="question" data-country="France"> <p>Another one question if you live in France</p> <input type="text" /> </div> <div class="question" data-town="Paris"> <p>Another one question if you live in Paris</p> <input type="text" /> </div> </form>