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

Question

我正在尝试在 Javascript 中选择新选项时更改跨度元素。

这是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. 感谢任何帮助，谢谢！

编辑

所以，我尝试在更多上下文中设置它，并将其更新为当前状态。

我的目标是告诉客户，相对于他选择的计划，他将在什么基础上付款（每月或每两个月）。感谢@Peter Seliger 我更新了代码，所以我现在有了这个：

Liquid/HTML(1):

<select name="plan_select" id="plan_select">
        {% for plan in selling_plan_group.selling_plans %}
        <option id="plan_option" data-billing-frequency="{% if plan.id == 5144746 %}ogni mese{% else %}ogni due mesi{% endif %}" value="{{ plan.id }}">{{ plan.options[0].value }}</option>
        {% endfor %}
</select>

HTML(2):

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

Javascript:

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_select');
  const frequencyDisplay = document.querySelector('#month');

  if (planOptions && frequencyDisplay) {

    const displayBillingFrequency = displayBoundBillingFrequency.bind(frequencyDisplay);

    // synchronize display data initially.
    displayBillingFrequency({
      currentTarget: planOptions,
    });

    // initialize event listening/handling
    planOptions.addEventListener('change', displayBillingFrequency);
  }
}

mainInit();

但是还是不行。谢谢。

Answer 1

你应该检查 HTMLElement: change event

var planSelectElem = document.getElementById("plan_select"); // <select id="plan_option_select"></select>

planSelectElem.onchange = month_freq;

// OR

planSelectElem.addEventListener("change", month_freq);

Answer 2

只想听听select元素的变化。

因此，人们需要以某种方式识别这个 select 元素，而不是它的每个选项元素。后者不需要 name- 或 id- 属性，而是 value- 属性。

然后实现一个事件处理程序，它读取当前 selected 选项的值，并将这个值写入 desired/related html 元素。

还需要向前面提到的 select 元素提供事件 listening/handling。

此外，我们希望在 load/render 时间将默认 selected 值与显示元素同步。

注意

出于安全原因，人们并不想通过 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 提供此信息的方法-attribute 以使处理程序实现尽可能通用（没有任何额外的和特定于案例的比较逻辑）...

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>

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

How to change the text-content of an html-element as soon as a new option was selected?

javascript

dom

rendering

onchange

dom-events