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

Posted 2023-02-25

【中文标题】使用与第一个下拉列表相同的值填充第二个下拉列表

【英文标题】：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() 处理程序中？

【参考方案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);