使用与第一个下拉列表相同的值填充第二个下拉列表答案

【问题标题】：Fill second dropdown with the same value as the first dropdown使用与第一个下拉列表相同的值填充第二个下拉列表
【发布时间】：2014-10-23 01:23:27
【问题描述】：

我有一个动态数量的下拉菜单。当在第一个下拉列表中选择一个值时，第二个等下拉列表的值将与第一个下拉列表相同。但是用户可以选择更改第二个等下拉菜单的值，但不能更改第一个和其他下拉菜单的值。

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

<select name="dropdown[]">
  <option value="1">Sony</option>
  <option value="2">Nintendo</option>
  <option value="3">Microsoft</option>
</select>

如何使用 javascript 或 jquery 库来实现这一点？

【问题讨论】：

到目前为止你有什么，你到底卡在哪里？
@jeroen - 实际上，我还没有任何想法。但是我确实在从第一个下拉列表中填充了第二个下拉列表之前。但是现在，我希望它与第一个下拉列表的值相同。非常感谢您的帮助。
为什么要使用级联下拉菜单？你可以只使用multiple 属性。服务于选择多个值的相同意图
你完全不知道吗？甚至不应该在 .change() 处理程序中？

标签： javascript php jquery html

【解决方案1】：

您可以将监听器附加到第一个选择元素：

var selects = document.querySelectorAll('select[name="dropdown[]"]');

selects[0].addEventListener('change', function () {
  for (var i = 0; i < selects.length; i++) {
    selects[i].value = selects[0].value;
  }
});

当只有第一个选择的值发生变化时，它会更新其他选择的值。这种方式不依赖任何第三方库。

演示：http://jsfiddle.net/cuefb9ag/

【讨论】：

感谢您的精彩回答！但是第一个下拉列表的值没有显示或提交。有什么好的理由或如何解决它？
@LoganWayne 你是什么意思，在演示中它工作正常，对吧？你能提供额外的上下文吗？
我提交数据时，第一个数组的值为0。

【解决方案2】：

使用change 事件，然后更改其他下拉菜单：

$("select[name=dropdown\\[\\]]").change(function() {
    var value = this.value;    
    $("select[name=dropdown\\[\\]]").not(this).val(value);
});

演示：http://jsfiddle.net/awv14f6r/1/

如果您想按顺序更改它们（首先更改第二个等） - 使用 next 和 this

$(this).next("select").val(value);

【讨论】：

谢谢！这实际上很棒。但是用户可以更改第二个等下拉菜单，而不是更改其他下拉菜单。
@LoganWayne - 是的 - 我编辑了我的答案以包括如何仅按顺序更改它们 - 或开始。

【解决方案3】：

var id = $('#DropDownID1 option:selected').val();
 var textValue = $('#DropDownID1 option:selected').text();
        $('#DropDownID2').prop('selectedIndex', 0);
        $('#DropDownID2').select2('data', {
            val: id,
            text: textValue
        });
        $('#DropDownID2 option:selected').val(id);
    }

【讨论】：