How to change value based on select item with javascript?

Question

<select id="curr">
          <option value="usd" selected>USD</option>
          <option value="eur">EUR</option>
          <option value="pnd">pound</option>
</select>
 <span class="price" data-usd="$1,500" data-eur="£1.271" data-pnd="€1.000">$1,500</span>
 <span class="price" data-usd="$1,500" data-eur="£1.271" data-pnd="€1.000">$1,500</span>
 <span class="price" data-usd="$1,500" data-eur="£1.271" data-pnd="€1.000">$1,500</span>

I wants if any one choose Eur then price should change to data-eur value.. or whatever they choose that price should update with that data-

Have you tried something with $("select#curr").on("change", ....) ? — Jeremy Thille
– Jeremy Thille, Commented Jan 21, 2021 at 10:29
Yes, try something with $("select#curr").on("change", ....) — Jeremy Thille
– Jeremy Thille, Commented Jan 21, 2021 at 11:15

Carsten Løvbo Andersen · Accepted Answer · 2021-01-21 10:45:16Z

1

You can try something like this:

$('#curr').change(function() {
  var v = $(this).val();
  $("span.price").each(function() {
    $(this).text($(this).attr("data-"+ v))
  })
});

Demo

$('#curr').change(function() {
  var v = $(this).val();
  $("span.price").each(function() {
    $(this).text($(this).attr("data-"+ v))
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="curr">
  <option value="usd" selected>USD</option>
  <option value="eur">EUR</option>
  <option value="pnd">pound</option>
</select>
<span class="price" data-usd="$1,500" data-eur="£1.271" data-pnd="€1.000">$1,500</span>
<span class="price" data-usd="$1,500" data-eur="£1.271" data-pnd="€1.000">$1,500</span>
<span class="price" data-usd="$1,500" data-eur="£1.271" data-pnd="€1.000">$1,500</span>

answered Jan 21, 2021 at 10:45

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavlo · Accepted Answer · 2021-01-21 10:46:08Z

1

Just write some JS code:

const currencySelector = $("#curr");
const elements = $('.price');
const currencies = {
  'usd': 1500,
  'eur': 1.271,
  'pnd': 1000
}

currencySelector.on('change', (event) => {
const value = event.target.value;
  elements.each((index, el) => {
    $(el).html(currencies[value]);
  });
});

answered Jan 21, 2021 at 10:46

Pavlo

6498 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to change value based on select item with javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related