Warm tip: This article is reproduced from serverfault.com, please click
dom dom-events javascript rendering onchange

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

发布于 2020-12-02 10:58:10

I am trying to change a span element when a new option is selected in Javascript.

This is the html code:

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

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

And this is my javascript code that currently just displays a text in when the page loads:

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

So, should I make a new function that is called when option changes or idk. Any help is appreciated, thanks!

EDIT

So, I try to set it in more context and update it to the current status.

My goal here is to tell the client, relative to the plan that he chooses, on which basis will he pay (monthly or two monthly). Thanks to @Peter Seliger I updated the code, so I now have this:

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

But it still doesn't work. Thanks.

Questioner
Benjamin Carafa
Viewed
0
分享
Peter Seliger 2020-12-03 18:02:07

One just wants to listen to the changes of a select element.

Thus one somehow needs to identify this very select element and not so much each of its option elements. The latter one's then do not need to feature either a name- or an id-attribute but a value-attribute instead.

Then one does implement an event handler which does read the currently selected option's value and also does write this very value to the desired/related html-element.

One also needs to provide the event listening/handling to the formerly mentioned select element.

In addition one wants to synchronize the default selected value with the displaying element at load/render time.

Note

For security reasons one does not really want to render a text value via innerHTML ... in this case a textContent write access does the job just fine.

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>

In case the OP has to render an option-specific text-value different from the option element's value-attribute there was still the approach of providing this information via an option-specific data-attribute in order to keep the handler-implementation as generic (without any additional and case-specific compare-logic) as possible ...

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>
Benjamin Carafa 2020-12-02 12:06:51

Thanks for the detailed explanation. Also, replying to your comment, I need to compare the value because I can't change that. So according to the value, that represents a frequency, I need to display a text that tells the customer how frequently he will be billed. Currently it doesn't work as you wrote it, now I'll try some changes.

Peter Seliger 2020-12-02 12:58:27

@BenjaminCarafa ... have a look at the provided alternative, and even more generic, second approach.

Benjamin Carafa 2020-12-02 13:58:13

Can you see the edited question please? Thanks a lot!

热门帖子

1
iOS 17.5 BUG 有用户发现多年前删除的照片重新出现在照片库
2
卷死同行 gpt-4o 模型 1.4 折中转 接近官网 3.5 的价格！
3
各位大佬好，我是一名大学生，想请教一下大家有没有什么适合大学生的赚钱小项目？我深知赚钱不易，所以想在不影响学业的前提下，找一些小项目来赚点零花钱。希望各位大佬能不吝赐教，分享一些你们的经验和建议。谢谢大家啦！
4
虚心求教，数据量上亿的爬虫数据用什么该用什么数据库呢
5
联通推出了更便宜的 eSIM iPad 套餐
6
坐标深圳，收台主机，不急
7
google doc如何快速插入日期时间？
8
最近三年面了三百多人，给程序员和面试官们分享一下我的感受
9
从江苏联通宽带换成了电信千兆，感觉换了个寂寞
10
远程工作，缴税地怎么选

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections.
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models.
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc.
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System
8
lightweight, standalone C++ inference engine for Google's Gemma models.
9
📚 Freely available programming books
10
A collective list of free APIs
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
12
🎓 Path to a free self-taught education in Computer Science!
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.