1

I am trying to change the value of label with change in drop-down value using jQuery but its not working. Please help me fix this.

<select id="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br/>
<label id="label"></label>
<br/>

$("label").val("150.000.000");
$(("#myselect").val()).on('change', function() {
    if ($("#myselect").val() == '1') {
        $("#label").val("150.000.000");
    } else  {
        $("#label").val("350.000.000");
    }
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
user317461
  • 185
  • 1
  • 2
  • 8

3 Answers3

1

Your selector attached to the change event is incorrect, you need to provide the id of the element as a string, not the value of the element itself. Also, label elements don't have a value you need to use text() to change them, and you can use this within the changehandler to refer to the select element. Try this:

$("label").text("150.000.000");
$("#myselect").on('change', function() {
  if ($(this).val() == '1') {
    $("#label").text("150.000.000");
  } else {
    $("#label").text("350.000.000");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<br/>
<label id="label"></label>
<br/>

You can even shorten the JS code to this:

$("label").text("150.000.000");
$("#myselect").on('change', function() {
    $("#label").text(function() {
        return $(this).val() == '1' ? "150.000.000" : "350.000.000";
    })
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • 1
    It definitely should, as you can see from the snippet. Check the console for errors elsewhere in your code. – Rory McCrossan Jan 21 '16 at 08:07
  • @RoryMcCrossan, just a question, is there a difference between `$(this).val()` and `$("option:selected", this).val()`. I saw the latter one [here](http://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery) and assumed its more preferred. – Rajesh Jan 21 '16 at 08:20
  • 1
    `$(this).val()` accesses the `value` property of the `select` directly. `$("option:selected", this).val()` looks for the selected `option` element within the `select` and gets the value from that. The first version is simpler, better practice and faster. – Rory McCrossan Jan 21 '16 at 08:22
0

You can save all values in an array and can use value to compute index of value to be selected.

Following snippet depicts the same:

var data = ["150.000.000", "350.000.000", "550.000.000", "750.000.000"];

$("#myselect").on("change", function() {
  var selectedVal = $("option:selected",this).val();
  var newValue = data[parseInt(selectedVal)-1];
  $("#label").text(newValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="myselect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<br/>
<label id="label"></label>
<br/>
Rajesh
  • 24,354
  • 5
  • 48
  • 79
0

Try this code:

  $(document).ready(function() {
  $("label").text("150.000.000");
  $("#myselect").on('change', function() {
    if ($("#myselect").text() == '1') {

      $("#label").text("150.000.000");

    } else {

      $("#label").text("350.000.000");
    }
  });
});
Sumanta736
  • 695
  • 3
  • 10