Question

我有一个＆＃34;主下拉菜单＆＃34;当问题询问他们的主要语言时，它包含四个选项（英语，西班牙语，俄语，其他）。

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

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

＆＃13;

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

＆＃13;

Answer 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

Answer 2

您可以在jQuery中执行此操作，如下所示，使用nextAll（）填充其他选择项：

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

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

Answer 3

下面添加一个EventListener，以便在第一个项目发生更改时触发，并将其值分配给其余的选择器。请根据您的要求更新var firstDD和reminingDD valriables。或者更好地为每个seletor使用特定的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());
        });
    });

下拉菜单使用上一个下拉菜单的值

3 个答案: