如何更新dom元素以在va​​nilla JS中选择选项值？

Question

使用DOM元素更新文本的最佳方式是什么，在这种情况下，<span>更新为<select> <option>有关vanilla JS更改的值？

为了给出上下文，在我的情况下，这是将<span></span>中显示的价格更新为选择的相应值。

<select name="classesPW" id="classesPW">
    <option value="5">1</option>
    <option value="9">2</option>
    <option value="12.50">3</option>
    <option value="16">4</option>
    <option value="19">5</option>
    <option value="22">6</option>
    <option value="25">7</option>
    <option value="28">8</option>
    <option value="31">9</option>
    <option value="34">10</option>
    <option value="37">11</option>
    <option value="40">12</option>
</select>

<h3>
    <span>£</span>
    <span id="pwTotal"> [[value here]] </span>
</h3>

Answer 1

您可以使用querySelector获取元素，为select指定一个change事件监听器，然后检索所选项的值并通过innerHTML将其放入span。

工作示例：

let select = document.querySelector('#classesPW')
let sp = document.querySelector('#pwTotal')

select.addEventListener('change', function() {
  sp.innerHTML = select.options[select.selectedIndex].value
})

<select name="classesPW" id="classesPW">
    <option value="5">1</option>
    <option value="9">2</option>
    <option value="12.50">3</option>
    <option value="16">4</option>
    <option value="19">5</option>
    <option value="22">6</option>
    <option value="25">7</option>
    <option value="28">8</option>
    <option value="31">9</option>
    <option value="34">10</option>
    <option value="37">11</option>
    <option value="40">12</option>
</select>

<h3>
    <span>£</span>
    <span id="pwTotal">5</span>
</h3>

Answer 2

＆＃13;

＆＃13;

var selectElement = document.getElementById('classesPW');

selectElement.addEventListener('change', function(e){
	var selection = selectElement.options[selectElement.selectedIndex].value;
	document.getElementById('pwTotal').innerText = selection;
});

＆＃13;

＆＃13;

＆＃13;