如何在香草JS中更新dom元素以选择选项值？

Question

What's the best way to update the text with a DOM element, in this case <span> to the value of a <select> <option> on change in vanilla JS?

To give context, in my case this is to update the price shown in the <span></span> to the corresponding value of the selection.

<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

You can use querySelector to get your elements, assign a change event listener to the select, and then retrieve the value of the selected item and put it to the span via innerHTML.

Working example :

 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

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