使用一个下拉菜单更改多个元素

Changing multiple elements with one drop down menu

本文关键字：元素 下拉菜单 一个      更新时间：2023-09-26

为什么这个小提琴不工作:

jspart基于类名修改span内容

<label>Change:</label>
<select name="list" id="list">
<option value="Test_a" selected>Test_a</option>
<option value="Test_b">Test_b</option>
<option value="Test_c">Test_c</option>
<option value="Test_d">Test_d</option>
</select>
<br/>1: <span name="result" class="result">Test_a</span>
<br/>2: <span name="result" class="result">Test_a</span>
<br/>3: <span name="result" class="result">Test_a</span>
<script>
var list1 = document.getElementById('list');
var tag1 = document.getElementsByClassName('result');
for (var i = 0; i < elems.length; i++) {
list1.onchange = function () {
    tag1.innerHTML = this.value;
};
};
</script>

我希望能够改变所有三个spans (class="result")，以显示下拉菜单选择的相同值。

它的工作很好，如果我使用getElementById，只有一个span结果与id="result"。

我想这就是你想要的。当列表更改时，用列表的值更新所有的span 

var list = document.getElementById('list');
var spans = document.getElementsByClassName('result');
list.onchange = function () {
    for (var i = 0; i < spans.length; i++) {
        spans[i].innerHTML = this.value;
    }
}

为什么这个小提琴不能用

因为代码中的tag1不是对单个DOM元素的引用，它将具有.innerHTML属性，但是该方法返回匹配元素的HTMLCollection，如果您想单独操作它们，则必须循环:

list1.onchange = function () {
  for (var i=0, l=tag1.length; i<l; i++) {
    tag1[i].innerHTML = this.value;
  };
};
相关文章：