如何在选择新选项后立即更改 html 元素的文本内容？

Question

当在 Javascript 中选择新选项时，我试图更改 span 元素。

这是html代码：

<span id="month"></span>

(...)

<option id="plan_option".....

这是我的 javascript 代码，当前仅在页面加载时显示文本：

window.onload = function month_freq() {

          var id = document.getElementById("plan_option").value;

          var freq = '';

          if (id == 5144746){

            freq = 'ogni mese';

          } else{

            freq = 'ogni due mesi';

          }

          document.getElementById("month").innerHTML = freq;

        }

那么，我应该创建一个在选项更改或 idk 时调用的新函数吗？任何帮助表示赞赏，谢谢！

Answer 1

人们只想听一个选择元素的变化。因此，人们需要以某种方式识别这个特定的选择元素，而不是它的每个选项元素。后者不需要具有name- 或id- 属性，而是需要 -value属性。然后，我们会实现一个事件处理程序，该处理程序会读取当前所选选项的值，并将该值写入所需/相关的 html 元素。还需要为前面提到的 select 元素提供事件侦听/处理。此外，我们希望在加载/渲染时将默认选定值与显示元素同步。笔记出于安全原因，人们并不真正希望通过innerHTML...呈现文本值，在这种情况下，textContent写访问就可以很好地完成这项工作。function handleMonthOptionChangeForRelatedDisplay(evt) {&nbsp; const elementDisplay = document.querySelector('#month');&nbsp; const elementSelect = evt.currentTarget;&nbsp; if (elementDisplay && elementSelect) {&nbsp; &nbsp; const elementSelect = evt.currentTarget;&nbsp; &nbsp; const selectedIndex = elementSelect.selectedIndex;&nbsp; &nbsp; elementDisplay.textContent = elementSelect[selectedIndex].value&nbsp; }}function initMonthOptionChange() {&nbsp; const elementSelect = document.querySelector('#month-options');&nbsp; elementSelect.addEventListener('change', handleMonthOptionChangeForRelatedDisplay);}// window.onload = function () {//&nbsp; &nbsp;handleMonthOptionChangeForRelatedDisplay({//&nbsp; &nbsp; &nbsp;currentTarget: document.querySelector('#month-options')//&nbsp; &nbsp;});//&nbsp; &nbsp;initMonthOptionChange();// }handleMonthOptionChangeForRelatedDisplay({&nbsp; currentTarget: document.querySelector('#month-options')});initMonthOptionChange();<select name="plan_option" id="month-options">&nbsp; <option value=""></option>&nbsp; <option value="Ogni Mese">ogni mese</option>&nbsp; <option value="Ogni due Mesi" selected>ogni due mesi</option></select><p id="month"></p>如果OP必须呈现与选项元素的属性不同的特定于选项的文本值，value仍然可以通过特定于选项的data属性提供此信息的方法，以便使处理程序实现保持通用（没有任何额外的和特定情况的比较逻辑）尽可能......function displayBoundBillingFrequency(evt) {&nbsp; const elementSelect = evt.currentTarget;&nbsp; if (elementSelect) {&nbsp; &nbsp; const selectedOption = elementSelect[elementSelect.selectedIndex];&nbsp; &nbsp; // `this` equals the bound billing-frequency display-element.&nbsp; &nbsp; this.textContent = (selectedOption.dataset.billingFrequency || '');&nbsp; }}function mainInit() {&nbsp; const planOptions = document.querySelector('#plan-options');&nbsp; const frequencyDisplay = document.querySelector('#plan-billing-frequency');&nbsp; if (planOptions && frequencyDisplay) {&nbsp; &nbsp; const displayBillingFrequency = displayBoundBillingFrequency.bind(frequencyDisplay);&nbsp; &nbsp; // synchronize display data initially.&nbsp; &nbsp; displayBillingFrequency({&nbsp; &nbsp; &nbsp; currentTarget: planOptions,&nbsp; &nbsp; });&nbsp; &nbsp; // initialize event listening/handling&nbsp; &nbsp; planOptions.addEventListener('change', displayBillingFrequency);&nbsp; }}mainInit();<select name="plan_option" id="plan-options">&nbsp; <option value=""></option>&nbsp; <option value="541758" data-billing-frequency="ogni mese" selected>First Option</option>&nbsp; <option value="752649" data-billing-frequency="ogni due mesi">Second Option</option>&nbsp; <option value="invalid">Invalid Option</option></select><p id="plan-billing-frequency"></p>

Answer 2

您应该检查HTMLElement:change 事件var planSelectElem = document.getElementById("plan_select"); // <select id="plan_option_select"></select>planSelectElem.onchange = month_freq;// ORplanSelectElem.addEventListener("change", month_freq);