unixmiah unixmiah - 4 months ago 25
jQuery Question

jquery on select drop down push data to label element

I have the following select drop down. I'm trying to figure out how to create a jquery script that'll correspond a message from the select value to the

<label class="vfb-desc">
replacing
Instructions
when choosing an item from the select drop-down.

<select name="vfb-16" id="vfb-16" class="vfb-select vfb-medium required ">
<option value="Select Credit Card type">Select Credit Card type</option>
<option value="Visa">Visa</option>
<option value="MasterCard">MasterCard</option>
<option value="Discover">Discover</option>
<option value="America Express">America Express</option>
</select>


<li class="vfb-item vfb-item-instructions " id="item-vfb-37">
<label class="vfb-desc"></label>
</li>


This is what I've tried:

var newLabel = '';
$('#vfb-16').on('change', function(){

$('#item-vfb-37 label').text(newLabel); //Change the text before changing the value
switch(this.value){
case 'Visa':
newLabel = 'Interest';
break;
case 'MasterCard':
newLabel = 'Future value';
break;
case 'Discover':
newLabel = 'Present value';
break;
case 'American Express':
newLabel = 'Payment';
break;
}

}).trigger('change');

<li class="vfb-item vfb-item-instructions " id="item-vfb-37">
<label class="vfb-desc"></label>
</li>


For some reason when I choose the drop down value, the results form
newLabel
doesn't match when placed in the
<label class="vfb-desc"></label>
container.

Answer

The most simple example:

$('#vfb-16').on('change', function() {
    $('#item-vfb-37 label').text($(this).val());
});
Comments