Question

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

<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 库来实现这一目标？

Answer 1

使用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);

Answer 2

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

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/

Answer 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);
    }

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

3 个答案: