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

Question

我有一个选择选项，也有一个带有跨度的div：

目标是当更改选择选项的选项时，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中对值进行硬编码，最好在select选项本身中指定它。

工作小提琴

Answer 2

您在这里有很多错误：

1. 您以某种方式忘记了跟踪“选定的”项目更改（应将其移至“更改”事件处理程序）
2. 相同（更不用说您忘记定义“ money”变量了），它也应该在事件处理程序中设置
3. “ .append”将添加内容到现有内容，但是我相信您需要替换它，因此请使用“ .html”代替

这是它应该如何工作的（如果我从您的代码样本中正确理解的话）：

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

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

Answer 3

 $(document).ready(function() { var money_span = $("#amount_of_money"); var money_value = money_span.val(); $('#Bank_Type123').change(function(event) { var selected = $('#Bank_Type123 option:selected').val(); event.preventDefault(); money = 0; if (selected === "Mizuho") { money = 10; } else if (selected === "UFJ") { money = 11; } else if (selected === "Yucho") { money = 12; } money_value = money; money_span.text(''); 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> 

将这些thre线移到change事件中

money_value = money;
        money_span.append(money_value);
        money_span.show();

Answer 4

我认为您正在寻找这个https://jsfiddle.net/xkfqddwc/

$(document).ready(function () {
  var money_span = $("#amount_of_money");
  var selected ='';
  var money = '';

  $('#Bank_Type123').change(function (event) {
      event.preventDefault();
      debugger;
      selected = $(event.target).val();
      money = 0;
      if (selected === "Mizuho") {
          money = 10;
      } else if (selected === "UFJ") {
          money = 11;
      }  else if(selected === "Yucho") {
          money = 12;
      }

    money_span.html(money);
    money_span.show();
  });
});

Answer 5

较短的版本可以像这样：

 var money_span = $("#amount_of_money"); $('#Bank_Type123').change(function(event) { event.preventDefault(); var selected = $(this).val(); if (selected === "Mizuho") { money_span.text(10); } else if (selected === "UFJ") { money_span.text(11); } else if (selected === "Yucho") { money_span.text(12); } }); 

 <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 6

把$('#Bank_Type123 option:selected').val(); 在change事件中，如下所示：

 $(document).ready(function() { var money_span = $("#amount_of_money"); $('#Bank_Type123').change(function(event) { var selected = $('#Bank_Type123 option:selected').val(); if (selected === "Mizuho") { money_span.text(10); } else if (selected === "UFJ") { money_span.text(11); } else if (selected === "Yucho") { money_span.text(12); } }); }); 

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

 $(document).ready(function(){ $('#Bank_Type123').change(function(){ $('#amount_of_money').text($('option:selected').val()) }) }) 

 <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="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>