为下拉列表项赋值显示在标签中

Question

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

这是我已经拥有的：

           <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 style="font-size:14px;">We bill quarterly/annually in advance</p>
  <p style="font-size:14px;">See <a href="#dialog" name="modal">Pricing</a> for more details
  </p></td>

    <td colspan="4"><label id="total" name="total">Total Cost:</label></td>

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

标准 =“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:

  <form id="packageChoices" action="" method="post">
    <fieldset>
      <label for="billPeriod">Bill:</label>
      <input type="radio" name="billPeriod" value="0" />Quarterly
      <input type="radio" name="billPeriod" value="1" checked />Annually
    </fieldset>

    <fieldset>
      <select class="purple" name="package">
        <option value="standard">Standard - €55 Monthly</option>
        <option value="standardAnn">Standard - €49 Monthly</option> 
        <option value="premium">Premium - €99 Monthly</option>
        <option value="premiumAnn" selected="selected">Premium - €89 Monthly</option>
        <option value="platinum">Platinum - €149 Monthly</option>
        <option value="platinumAnn">Platinum - €134 Monthly</option>            
</select>
    </fieldset>

    <fieldset>
      <label id="total">Total Price: </label>
    </fieldset>
  </form>

Live demo: JS Bin

我知道你已经接受了答案，但放弃最后半个小时的尝试记住正则表达式有多么简单似乎是一种浪费有效...=）

Answer 3

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

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

同样，这不是最佳实践，但我认为它会工作。请注意，如果下拉菜单选项中的价格之前有任何其他数字，这将会中断。