javascript - 在选择选项更改时更新跨度值

Question

我有一个选择选项，还有一个内部带有跨度的 div:

目标是当更改 select 选项的选项时， span 的值将会改变。这是我的想法:

$(document).ready(function() {
  var money_span = $("#amount_of_money");
  var money_value = money_span.val();
  var selected = $('#Bank_Type123 option:selected').val();

  $('#Bank_Type123').change(function(event) {
    event.preventDefault();
    money = 0;
    if (selected === "Mizuho") {
      money = 10;
    } else if (selected === "UFJ") {
      money = 11;
    } else if (selected === "Yucho") {
      money = 12;
    }
    return money;
  });
  money_value = money;
  money_span.append(money_value);
  money_span.show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bank_Type123" class="form-control">
     <option value="" disabled selected style="display:none;">Choose A Bank</option>
     <option value="Mizuho">Mizuho</option>
     <option value="UFJ" >UFJ</option>
     <option value="Yucho" >Yucho</option>
</select>

<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>

但是当我尝试时，在更改选择菜单中的选项时，跨度中没有出现任何内容。

Answer 1

嗨，冒昧地把它改成这样

HTML

<select id="Bank_Type123" class="form-control">
  <option value="" disabled selected style="display:none;">Choose A Bank</option>
  <option value="10">Mizuho</option>
  <option value="11">UFJ</option>
  <option value="12">Yucho</option>
</select>

<div class="input-group px-1 py-1">
  <span class="input-group-addon">Wallet</span>
  <span id="amount_of_money" class="input-group-addon unique"></span>
  <span class="input-group-addon">JPY</span>
</div>

JS

$(document).ready(function() {
  $('#Bank_Type123').change(function(event) {
    $("#amount_of_money").text($(this).val());
  });
});

我觉得最好在选择选项本身中指定它，而不是在 JS 中对值进行硬编码。

Working Fiddle