[英]Changing multiple elements with one drop down menu
為什么這個小提琴不起作用:
<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"
,則效果很好。
我想這就是你所追求的 。 更改列表時,用列表的值更新所有范圍。
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;
};
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.