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代码将标签的值更改为下拉列表的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：

  <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 - &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="total">Total Price: </label>
    </fieldset>
  </form>

现场演示：JS Bin

我意识到你已经接受了答案，但是在最后半小时试图记住正则表达式的简单运行似乎是浪费... =）

Answer 3

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

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

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

将值分配给下拉列表项目＆amp;在标签中显示

3 个答案:

jQuery的：

HTML：