CODEWITHSUNDEEP
jquerydrop-down-menu
Dave
Dave

Reputation: 127

Change value of a label when select form is changed with jQuery

What I want to do is to be able to change the value of a label when I make a change in a dropdown select form.

<select form="FormCalcInput" id="calcOption" title="Choose what value you want to count> 
    <option value="PMT" class="PMT">Payment (PMT)</option>
    <option value="I" class="I">Interest (I)</option>
    <option value="FV" class="FV">Future value (FV)</option>
    <option value="PV" class="PV">Present value (PV)</option>
</select>

<label id="labelChanged"></label>

So the label should be the previous selected value.

Thanks.

Upvotes: 1

Views: 9275

Answers (7)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

If you want the previous selected, you need a global variable :

var newLabel = '';
$('#calcOption').on('change', function(){
    $('#labelChanged').text(newLabel); //Change the text before changing the value
    switch(this.value){
        case 'I':
            newLabel = 'Interest';
            break;
        case 'FV':
            newLabel = 'Future value';
            break;
        case 'PV':
            newLabel = 'Present value';
            break;
        case 'PMT':
            newLabel = 'Payment';
            break;
    }
}).trigger('change');

Upvotes: 1

Abdullah Obaidullah
Abdullah Obaidullah

Reputation: 79

you can call this kind of code on change event of dropDown 

Var ddlSelectedValue = $('#calcOption').text();
$('#labelChanged').text(ddlSelectedValue );

Upvotes: 0

Raja Danish
Raja Danish

Reputation: 235

Please try this:

function TestFunction() {

                var name = $("#calcOption option:selected").text();

                if (name == "Interest (I)") {
                    $("#labelChanged").val("");
                    $("#labelChanged").text("Payment");
                }
                else if (name == "Interest (I)") {
                  //set other value
                }
            }

Upvotes: 0

adeneo
adeneo

Reputation: 318182

I'm guessing it should be like this.

$('#calcOption').on('change', function() {
    var prev = $(this).data('prev') || $('option:first', this).text();

    $('#labelChanged').text(prev);
    $(this).data('prev', $('option:selected', this).text());
});

FIDDLE

This saves the previously selected value and sets it as the labels text

Upvotes: 1

Think Different
Think Different

Reputation: 2815

$(document).ready(function(){
    var previous = $('#calcOption').val();
    $('#calcOption').change(function(){
        var val = $(this).val();

        $('#labelChanged').html(previous);
        previous = val;
    });
});

Updated

Upvotes: 1

Dexter
Dexter

Reputation: 1796

try this 

<select form="FormCalcInput" id="calcOption" title="Choose what value you want to count" onChange="changelabel(this.value)"> 
<option value="PMT" class="PMT">Payment (PMT)</option>
<option value="I" class="I">Interest (I)</option>
<option value="FV" class="FV">Future value (FV)</option>
<option value="PV" class="PV">Present value (PV)</option>
</select>

<label id="labelChanged"></label>

in javascript

var labelname;
function changelabel(var value){
     switch(value){
         case 'I': 
         case 'FV':
             labelname  = 'Payments';
             break;
         case 'PMT':
     }
  $('#labelChanged').html(labelname);
}

Upvotes: 0

Huangism
Huangism

Reputation: 16438

I am not sure if this is what you are looking for, but this sets the label to the text from the option selected

$('#calcOption').on('change', function(){
    var v = $(this).find(':selected').text();
    $('#labelChanged').text( v );
});

http://jsfiddle.net/zQ77t/

Upvotes: 0

Related Questions