change label with dropdown's value not text with jquery

Question

I have this line of html code

$(document).ready(
  function() {
    $('select[name=tipe_aktiva]').change(
      function() {
        var newText = $('option:selected', this).text();
        $('#tipeLabel').text(newText);
      }
    );
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select class="form-control col-md-7 col-xs-12" id="tipe_aktiva" name="tipe_aktiva" required="required">      
  <option value="">Please Select</option>
  <option value="1">AKtiva tetap</option>
  <option value="2">AKtiva tidak tetap</option>
</select>

<label style="padding: 8px 0px;" id="tipeLabel" name="tipeLabel"></label>

it worked rfeally well but it change the label with dropdown's text not the value. i wanted to know if it possible to get dropdown's value to change my label. in this case it will be 1 if i choose "Aktiva tetap", and 2 if i choose "Aktiva tidak tetap"

thanks in advance

`$('#tipeLabel').text($(this).val())` You can use `.val()` to set the value of select — Satpal, Nov 01 '17 at 11:56

score 0 · Answer 1 · answered Nov 01 '17 at 11:59

This gets the selected text:

var newText = $('option:selected',this).text();

This gets the selected value (from the <select> itself, not from the <option> therein, though it should make no difference):

var newText = $(this).val();

Simply use that value instead:

var newValue = $(this).val();
$('#tipeLabel').text(newValue);

score 0 · Accepted Answer · answered Nov 01 '17 at 12:00

Try this...

$(document).ready(
  function() {
    $('select[name=tipe_aktiva]').change(
      function(){
        var newText = $('option:selected',this).val(); //cahnge this line
        $('#tipeLabel').text(newText);
      }
      );
  }
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select class="form-control col-md-7 col-xs-12" id="tipe_aktiva" name="tipe_aktiva" required="required">            
                                            <option value="">Please Select</option>
                                            <option value="1">AKtiva tetap</option>
                                            <option value="2">AKtiva tidak tetap</option>
                                        </select>
                                        
                                        <label style="padding: 8px 0px;" id="tipeLabel" name="tipeLabel"></label>

change label with dropdown's value not text with jquery

2 Answers2