如何根据选择标签的选定选项的值为变量分配新值，检索并使用变量的新值？

Question

我正在构建一个表单，用户可以在其中选择他们想要更改的货币，并且当他们选择货币时，它会反映金额标签旁边的货币符号。我想在页面上显示所选货币符号的 STRING 等价物，但我不知道如何在 javascript 中实现。

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

上面是我正在尝试做的代码游乐场链接，我编写了 jquery 代码来交替选择选项的值并在金额标签旁边显示选项的值，如果我评论它工作正常out 比较选项值的值并将新值分配给 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>

如果所选选项的值为 $charset 或 GBP，我希望 stringcurr div 显示美元，如果所选选项的值为 £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>