将值分配给下拉列表项并显示在标签中

我有一个下拉列表，我想要做的是为下拉列表中的项目赋值，然后根据选择的项目在标签中显示这些值。

这是我已经拥有的：

 Package*   Standard - €55 Monthly Standard - €49 Monthly Premium - €99 Monthly Premium - €89 Monthly Platinum - €149 Monthly Platinum - €134 Monthly     
We bill quarterly/annually in advance
 
See Pricing for more details 
 Total Cost: 

我当前的jQuery代码将标签的值更改为下拉列表的ACTUAL内容，但是我想将以下值分配给下拉列表的内容：

标准=“每季度165欧元”
StandardAnn =“每年588欧元”
保费=“每季度297欧元”
PremiumAnn =“每年1068欧元”
白金=“每季度447欧元”
PlatinumAnn =“每年1608欧元”

这样，当用户选择某个包时，总价将显示给他们，因为他们要么提前每季度支付，要么每年提前支付。 当他们到达付款页面时试图防止冲击！ 这是我的jQuery：

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

我在修改代码方面遇到了一些麻烦，因为我是jQuery的新手，而且我已经面临着完成这项工作的压力。 有谁可以帮助我吗？

Answer 1

您可以创建要显示的文本数组

 var AnnualCosts = []; AnnualCosts['standard'] = "€165 Quarterly"; AnnualCosts['standardAnn'] = "€588 Annually"; ... $(document).ready( function() { $('select[name=package]').change( function(){ var newText = AnnualCosts[$('option:selected',this).val()]; $('#total').text('Total price: ' + newText); } ); } 

不是最好的做法，但你的整个代码不是。 这很快又脏。 不那么可维护。

Answer 2

它花了我一段时间比我想象的更长，并且不会重写你的html（无论如何我记得要做），但以下工作：

jQuery的：

 $(document).ready( function() { $('select[name=package]').change( function(){ var monthly = $('input:checked[name=billPeriod]').val(); var price = $(':selected',this).text(); var price = price.match('[0-9]{2,3}'); if (monthly == 0) { var recurrence = 'quarterly'; var cost = price * 4; } else if (monthly == 1) { var recurrence = 'annually'; var cost = price * 12; } $('#total').text('Total price ('+recurrence+'): €' + cost); } ); } ); 

HTML：

  
 
 Bill: Quarterly Annually 
 
  Standard - €55 Monthly Standard - €49 Monthly Premium - €99 Monthly Premium - €89 Monthly Platinum - €149 Monthly Platinum - €134 Monthly  
 
 Total Price:  
  

现场演示： JS Bin

我意识到你已经接受了一个答案，但是在最后半小时试图记住正则表达式是多么简单，这似乎是浪费… =）

Answer 3

基于select字段中显示的值，快速而脏的正则表达式应该可以正常工作：

 var annualCost = 12 * $('option:selected').html().match(/\d+/); $('#total').html('Total price: €' + annualCost); 

同样，这不是最好的做法，但我认为它会起作用。 请注意，如果任何其他数字在下拉菜单选项中的价格之前，则会中断。