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

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

这是html代码：

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

(...)
<option id="plan_option".....

所以，我应该创建一个新函数，在选项更改或idk时调用它吗。 感谢您的帮助，谢谢

编辑

因此，我尝试在更多的上下文中设置它，并将其更新为当前状态

我在这里的目标是告诉客户，相对于他选择的计划，他将在哪个基础上每月或每月支付两次。 感谢@Peter Seliger，我更新了代码，因此我现在有了以下内容：

液体/HTML1：

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

但它仍然不起作用。谢谢。

你应该检查一下

var planSelectElem=document.getElementByIdplan_select；// planSelectElem.onchange=月份\频率； //或 planSelectElem.addEventListenerchange，月/频；

---

我们只想听听select元素的变化

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

然后实现一个事件处理程序，它读取当前所选选项的值，并将该值写入所需/相关的html元素

还需要为前面提到的select元素提供事件侦听/处理

此外，还需要在加载/渲染时将默认选定值与显示元素同步

注

出于安全原因，人们并不真正希望通过innerHTML呈现文本值。。。在这种情况下，textContent写访问可以很好地完成这项工作

功能手柄MonthOptionChangeforRelatedDisplayEVT{ const elementDisplay=document.querySelector'month'； 常量元素选择=evt.currentTarget； if element显示（&element）选择{ 常量元素选择=evt.currentTarget； 常量selectedIndex=elementSelect.selectedIndex； elementDisplay.textContent=elementSelect[selectedIndex].value } } 函数initMonthOptionChange{ const elementSelect=document.querySelector'month-options'； elementSelect.addEventListener'change'，handleMonthOptionChangeForRelatedDisplay； } //window.onload=函数{ //HandleMonth更改相关显示的选项{ //currentTarget:document.querySelector'month-options' // }; //初始期望变化； // } HandleMonth更改相关显示的选项{ currentTarget:document.querySelector'month-options' }; 初始期望变化； ogni mese 梅西奥尼酒店

---

document.querySelectorplan\u option.addEventListenerchange=>{}；是否可以执行document.querySelectorplan\u option.addEventListenerchange，month\u freq？或者我需要重写函数。@Benjaminboafa您不应该这样做，它将执行函数两次，请参阅我的答案。关于id==5144746。。。对于所展示的用例，没有真正的理由使代码依赖于特定的id值。id还具有一个字符串值，该值不应与示例代码中所示的数字值进行比较。@PeterSeliger很棒，刚刚在“mainInit”中添加了“window.onload”，它就可以工作了。谢谢！！Idk why，似乎是对的，但不起作用。感谢您的详细解释。另外，回复您的评论，我需要比较值，因为我无法更改它。因此，根据表示频率的值，我需要显示一个文本，告诉客户他将被计费的频率。目前它不能像您编写的那样工作，现在我将尝试一些更改。@Benjaminboafa。。。请查看提供的备选方案，甚至更通用的第二种方法。您能看到编辑后的问题吗？谢谢！

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

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

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