Update span value on select option change

Question

I have a select option, also have a div with a span inside:

The goal is when change the option of the select option, the span 's value will change. Here's how i came up with:

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

But when I try, nothing appear in the span when changed the option in select menu.

callback on event change is asynchronous. So when you are trying to assign money_value from money it will get undefined value. — Diptopol Dam, Dec 19 '17 at 07:53

score 2 · Accepted Answer · answered Dec 19 '17 at 08:04

Hi took the liberty of changing it like this

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());
  });
});

I feel instead of hardcoding the values in JS it would be good to specify it in select option itself.

Working Fiddle

I think this is the best solution. right code in a right way. +1 — Pedram, Dec 19 '17 at 08:09

2oppin · Answer 2 · 2017-12-19T08:27:54.417

You have a lot of errors here:

somehow you forget to track "selected" item change (it should be moved to "change"-event handler)
Same (not to mention you forgot to define "money" variable), it also should be set in event handler
".append" will add content to existing, but I believe you need to replace it, so use ".html" instead

here is how it should work (if I understand correctly from your code-samples):

$(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();
    });
});

Thanks for full explaination with example . However , I think the "money" and "selected" global variable is not necessary — Hoàng Việt, Dec 19 '17 at 08:11
@HoàngViệt, maybe, but if you enclose it in event-handler, you will be lack of flexibility to upgrade functionality, if something other can change that variable, or you will need to keep track it. besides it's "lesser changes" to let author to decide ). — 2oppin, Dec 19 '17 at 08:22

Lalit Sachdeva · Answer 3 · 2017-12-19T07:58:11.150

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

Move these thre lines inside of the change event

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

score 0 · Answer 4 · answered Dec 19 '17 at 07:54

I think you are looking for this 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();
  });
});

score 0 · Answer 5 · answered Dec 19 '17 at 08:05

A shorter version can be like this:

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>

score 0 · Answer 6 · answered Dec 19 '17 at 08:49

Put $('#Bank_Type123 option:selected').val(); inside the change event like below:

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

score 0 · Answer 7 · answered Dec 19 '17 at 10:03

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

Update span value on select option change

7 Answers7

Linked