Switch Case JavaScript 表格

Question

我希望这不是重复的。我想以这种方式构建一个交互式网络表单。在每个问题或 selection 之后，用户都会出现新问题，所以直到那时所有问题都被隐藏，除了第一个；我的第二个问题是我希望第二个、第三个……的回答取决于他们对前一个问题的回答。你知道我怎样才能用 switch case 做到这一点吗？我将在这里举一个我想要的小例子：

所以出现在表格中的唯一问题是你住在哪里，如果用户 select 法国，则会创建第二个下拉列表并询问 select 法国市并且只显示了法国的城市等等。

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

感谢您的帮助，亚历克斯

Answer 1

试试这个。
您不需要为每个国家重复 select。只需使用 data-country.

设置依赖关系

对于其他问题，您可以做同样的事情。为问题包装器设置具有适当值的数据属性，它们会在表单更改时动态显示或隐藏。

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

Switch Case JavaScript 表格

Switch Case JavaScript Form

javascript

css

forms

frontend