让下拉菜单使用上一个下拉菜单的值答案

【问题标题】：Have dropdown menus use value of previous dropdown让下拉菜单使用上一个下拉菜单的值
【发布时间】：2018-01-09 16:06:33
【问题描述】：

我有一个“主下拉菜单”，其中包含四个选项（英语、西班牙语、俄语、其他），因为问题询问他们的主要语言。

在此主下拉菜单下方包含提出类似问题并包含相同选项的其他问题（英语、西班牙语、俄语、其他）。

我想知道是否可以让其他下拉菜单选项具有基于“主下拉菜单”选项选择的相同值。因此，如果 John Smith 在主下拉菜单中选择英语，其他问题将自动在其他下拉菜单中选择英语，同时还允许 John 更改答案 - 他可以为问题 3 选择西班牙语。我希望解决方案使用JavaScript 或 jQuery，因为 PHP 不会是一个选项。

<label>What is your primary language?</label>
<select name="question1">
  <option></option>
  <option value="english">English</option>
  <option value="spanish">Spanish</option>
  <option value="russian">Russian</option>
  <option value="other">Other</option>
</select>
<label>Language your spouse speaks?</label>
<select name="question2">
  <option></option>
  <option value="english">English</option>
  <option value="spanish">Spanish</option>
  <option value="russian">Russian</option>
  <option value="other">Other</option>
</select>
<label>Language your children speak?</label>
<select name="question3">
  <option></option>
  <option value="english">English</option>
  <option value="spanish">Spanish</option>
  <option value="russian">Russian</option>
  <option value="other">Other</option>
</select>

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

在主下拉菜单中选择值时，您可以通过 JavaScript 将该值设置为其他下拉菜单。

document.querySelector('select[name="question1"]').addEventListener('change', function(event) { document.querySelector('select[name="question2"]').value = event.target.value; document.querySelector('select[name="question3"]').value = event.target.value; });

非常简单的解决方案，但应该可以工作

JSFiddle

【讨论】：

【解决方案2】：

您可以在 jQuery 中按如下方式执行此操作，使用 nextAll() 填充其他选择项：

$('select').on('change', function() {
  $(this).nextAll('select').val($(this).val());
});

（请注意，您可能希望为您的选择添加一个类，因为上述操作将作用于页面上的所有选择元素）。

【讨论】：

【解决方案3】：

下面您将添加一个 EventListener 以在第一项更改时触发并将其值分配给其余选择器。请根据您的要求更新 var firstDD 和 reminingDD 变量。或者更好地为每个选择器使用特定的 ID，以便于理解。

$( document ).ready(function() {
        var firstDD = $("select:first-child");
        var reminingDD = $("select:not(:first-child)");
        console.log(reminingDD);
        firstDD.change(function () {
            $(reminingDD).val($(firstDD).val());
        });
    });

【讨论】：