[jquery] Use jQuery to change value of a label

I have a label, costLabel.

What I want to be able to do is change the value of this label depending on the selected value of a dropdownlist.

This is my HTML:

<table>
  <tr>
    <td width="343">Package*</td>

    <td colspan="4">
      <select class="purple" name="package">
        <option value="standard">Standard - &euro;55 Monthly</option>
        <option value="standardAnn">Standard - &euro;49 Monthly</option>            
        <option value="premium">Premium - &euro;99 Monthly</option>
        <option value="premiumAnn" selected="selected">Premium - &euro;89 Monthly</option>            
        <option value="platinum">Platinum - &euro;149 Monthly</option>
        <option value="platinumAnn">Platinum - &euro;134 Monthly</option>            
      </select>
    </td>

  <tr>
    <td width="343">
      <p>We bills quarterly/annually in advance</p>
      <p>See <a href="#dialog" name="modal">Pricing</a> for more details</p>
    </td>
    <td colspan="4"><label id="costlabel" name="costlabel">Total Cost:</label></td>

  <tr>
</table>

The values that go into the cost label are

  • Standard = "€165 Quarterly"
  • StandardAnn = "€588 Annually"
  • Premium = "€297 Quarterly"
  • PremiumAnn = "€1068 Annually"
  • Platinum = "€447 Quarterly"
  • PlatinumAnn = "€1608 Annually"

I did have the following code in place which calculated the cost depending on the dropdown menu, but the registration form has since changed to be more simpler(i.e. discountselection is not gone), and I'm having a bit of trouble adapting the jQuery. Can someone help?

$(function() {
  $("#discountselection, select[name=package], input[name=discount]").
    change(function() {
      var
        selected_value = $("#discountselection").val(),
        discount = [12, 24, 36],
        package = $("select[name=package]").val(),
        package_prices = {'standard': 49, 'premium': 85, 'platinum': 134 },
        cost = package_prices[package] * discount[selected_value-1];

      $("#costlabel").val(cost);
    });
});

This question is related to jquery drop-down-menu

The answer is


.text is correct, the following code works for me:

$('#lb'+(n+1)).text(a[i].attributes[n].name+": "+ a[i].attributes[n].value);

val() is more like a shortcut for attr('value'). For your usage use text() or html() instead


Validation (HTML5): Attribute 'name' is not a valid attribute of element 'label'.