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

问题描述

我有一个标签，costLabel。

我想要做的是根据下拉列表的选定值更改此标签的价值。

这是我的HTML：

 < table> 
< tr> 
< td width =343>包*< / td> 
 
< td colspan =4> 
< select class =purplename =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 =premiumAnnselected =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>我们每季度提前/每年提交< / p> 
< p>参见< a href =＃dialogname =modal> Pricing< / a>更多详情< / p> 
< / td> 
< td colspan =4>< label id =costlabelname =costlabel>总成本：< / label>< / td> 
 
< tr> 
< / table> 
  

进入成本标签的值为

• 标准=€165季度


• StandardAnn =€588每年


• Premium =€ 297季度


• PremiumAnn =€1068每年


• 铂金=€447季度

< PlatinumAnn =€1608每年

我确实有以下代码，根据下拉菜单计算成本，但是注册表已经变得更简单了（即折扣选择没有消失），而且我在调整jQuery时遇到了一些麻烦。有人可以帮忙吗？

  $（function（）{
 $（＃discountselection，select [name = package] ，输入[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有一个盲点结构，但我认为这是你要找的。它应该从选择输入中找到当前选择的选项，将其文本分配给 newVal 变量和然后将该变量应用于 #costLabel 标签的值属性：

jQuery

  $（document）.ready（
 function b $ b $（'select [name = package]'）。change（
 function（）{
 var newText = $（'option：selected'，this）.text（）; 
 $（'＃costLabel'）。text（'总价：'+ newText）; 
} 
）; 
} 
）; 
  

html：

 code>< form name =thisFormid =thisFormaction =＃method =post> 
< fieldset> 
< select name =packageid =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 =premiumAnnselected =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 =costLabelname =costLabel>总价：< / label> 
< / fieldset> 
< / form> 
  

上述工作演示： JS Bin

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

解决方案

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:

jQuery

$(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>

Working demo of the above at: JS Bin

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