使用 jQuery 更改标签的值 [英] Use jQuery to change value of a label

问题描述

我有一个标签，costLabel.

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.

这是我的 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>

进入成本标签的值是

• 标准 =每季度 165 欧元"
• StandardAnn =每年 588 欧元"
• Premium =每季度 297 欧元"
• PremiumAnn =每年 1068 欧元"
• 白金 =每季度 447 欧元"
• PlatinumAnn =每年 1608 欧元"

我确实有以下代码，它根据下拉菜单计算成本，但此后注册表变得更简单(即折扣选择没有消失)，我在适应时遇到了一些麻烦jQuery.有人可以帮忙吗?

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);
    });
});

推荐答案

我似乎对您的 html 结构有一个盲点，但我认为这正是您要寻找的.它应该从 select 输入中找到当前选择的选项，将其文本分配给 newVal 变量，然后然后将该变量应用于 #costLabel 标签的 >value 属性:

I seem to have a blind spot as regards your html structure, but I think that this is what you're looking for. It should find the currently-selected option from the select input, assign its text to the newVal variable and then apply that variable to the value attribute of the #costLabel label:

$(document).ready(
  function() {
    $('select[name=package]').change(
      function(){
        var newText = $('option:selected',this).text();
        $('#costLabel').text('Total price: ' + newText);
      }
      );
  }
  );

html:

  <form name="thisForm" id="thisForm" action="#" method="post">
  <fieldset>
    <select name="package" id="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>
  </fieldset>
    
    <fieldset>
      <label id="costLabel" name="costLabel">Total price: </label>
    </fieldset>
  </form>

上述工作演示:JS Bin

这篇关于使用 jQuery 更改标签的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！