Как назначить новое значение переменной на основе значения выбранной опции тега select, извлечь и использовать новое значение переменной?

Question

Я создаю форму, в которой пользователь может выбрать валюту, которую он хочет изменить, и когда он выбирает валюту, он отображает символ валюты рядом с меткой «Сумма».Я хочу отобразить STRING эквивалентность выбранного символа валюты в результате на странице, и я не знаю, как этого добиться в javascript.

https://www.w3schools.com/code/tryit.asp?filename=G89PFIUW1OUC

выше кодСсылка на игровую площадку с тем, что я пытаюсь сделать, я написал код jquery, чтобы чередовать значение параметров выбора и отображать значение параметра рядом с меткой Amount, и он работает нормально, если я закомментирую функцию, которая сравнивает значениезначения параметра и назначает новое значение переменной stringcurr.Я не знаю, что я делаю неправильно, поэтому мне нужна помощь.

<div class="col-md-3">
  <span class="color-bold">Cash Back Exchange Currency<span style="color:red;">*</span></span>
  <select class="form-control" id="currSelect">
    <option value="">Select currency</option>
    <option value="&#36;"> United States Dollars (USD) </option>
    <option value="&#163;"> Great Britain Pounds (GBP) </option>
    <option value="&#8364;"> European Euro (EUR) </option>
  </select>
</div>

<div class="col-md-3">
  <label class="color-bold">Amount  - <span id="curr"></span> <span style="color:red;">*</span></label>
  <input name="forexamount" id="forexamount" class="common" type="number" placeholder="Eg. 200">
</div>
<div id="stringcurr"></div>

JS

<script>
  var intcurr;
  var currencysymbol = "";

  $("#currSelect")
    .change(function() {

        $("#currSelect option:selected").each(function() {
          currencysymbol = $(this).val();
        });
        $("#curr").text(currencysymbol /* .substring(1,0) */ );

        (function(currencysymbol) {
            if (currencysymbol != "") {
              if (currencysymbol == "&#36;") {
                return intcurr = "USD";
              } else if (currencysymbol == "&#163;") {
                return intcurr = "GBP";
              } else if (currencysymbol == "&#8364;") {
                return intcurr = "EUR";
              } else {
                return false
              }

              $("#stringcurr").text(intcurr);
            })();

          change();
        });
</script>

Я ожидаю, что div stringcurr покажет USD, если значение выбраноопция - $ charset или GBP, если значение выбранной опции - £ charset и т. д., присваивая строки переменной intcurr.

Answer 1

Более простой подход - добавить атрибут данных к каждому <option> с текстовыми значениями валюты и использовать jQuery data() для доступа к ним.

Также вам нужно связать триггер метода change() длязагрузка страницы

$("#currSelect").change(function() {
  // get selected data or make it empty string if undefined
  var curr = $(this).find(':selected').data('curr') || '';
  $('#curr, #stringcurr').text(curr);
   // trigger event on page load
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <span class="color-bold">Cash Back Exchange Currency<span style="color:red;">*</span></span>
  <select class="form-control" id="currSelect">
    <option value="">Select currency</option>
    <option value="&#36;" data-curr="USD"> United States Dollars (USD) </option>
    <option value="&#163;" data-curr="GBP"> Great Britain Pounds (GBP) </option>
    <option value="&#8364;" data-curr="EUR"> European Euro (EUR) </option>
  </select>
</div>

<div class="col-md-3">
  <label class="color-bold">Amount  - <span id="curr"></span> <span style="color:red;">*</span></label>
  <input name="forexamount" id="forexamount" class="common" type="number" placeholder="Eg. 200">
</div>
<div id="stringcurr"></div>