如何在选择新选项后立即更改 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) {

  const elementDisplay = document.querySelector('#month');

  const elementSelect = evt.currentTarget;

  if (elementDisplay && elementSelect) {

    const elementSelect = evt.currentTarget;

    const selectedIndex = elementSelect.selectedIndex;

    elementDisplay.textContent = elementSelect[selectedIndex].value

  }

}

function initMonthOptionChange() {

  const elementSelect = document.querySelector('#month-options');

  elementSelect.addEventListener('change', handleMonthOptionChangeForRelatedDisplay);

}

// window.onload = function () {

//   handleMonthOptionChangeForRelatedDisplay({

//     currentTarget: document.querySelector('#month-options')

//   });

//   initMonthOptionChange();

// }

handleMonthOptionChangeForRelatedDisplay({

  currentTarget: document.querySelector('#month-options')

});

initMonthOptionChange();

<select name="plan_option" id="month-options">

  <option value=""></option>

  <option value="Ogni Mese">ogni mese</option>

  <option value="Ogni due Mesi" selected>ogni due mesi</option>

</select>

<p id="month"></p>

如果OP必须呈现与选项元素的属性不同的特定于选项的文本值，value仍然可以通过特定于选项的data属性提供此信息的方法，以便使处理程序实现保持通用（没有任何额外的和特定情况的比较逻辑）尽可能......

function displayBoundBillingFrequency(evt) {

  const elementSelect = evt.currentTarget;

  if (elementSelect) {

    const selectedOption = elementSelect[elementSelect.selectedIndex];

    // `this` equals the bound billing-frequency display-element.

    this.textContent = (selectedOption.dataset.billingFrequency || '');

  }

}

function mainInit() {

  const planOptions = document.querySelector('#plan-options');

  const frequencyDisplay = document.querySelector('#plan-billing-frequency');

  if (planOptions && frequencyDisplay) {

    const displayBillingFrequency = displayBoundBillingFrequency.bind(frequencyDisplay);

    // synchronize display data initially.

    displayBillingFrequency({

      currentTarget: planOptions,

    });

    // initialize event listening/handling

    planOptions.addEventListener('change', displayBillingFrequency);

  }

}

mainInit();

<select name="plan_option" id="plan-options">

  <option value=""></option>

  <option value="541758" data-billing-frequency="ogni mese" selected>First Option</option>

  <option value="752649" data-billing-frequency="ogni due mesi">Second Option</option>

  <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;

// OR

planSelectElem.addEventListener("change", month_freq);