值分配给下拉列表中的标签项目和显示(Assign value to dropdownlist ite

我有一个下拉列表，我想这样做是赋值在下拉列表中的项目，然后在标签取决于所选择的项目显示这些值..

以下是我已经：

           <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 - &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斌

我知道你已经接受了答案，但它似乎是一个废物扔试图记住走最后半小时是多么简单的正则表达式的作品... =）

Answer 3:

一个快速和肮脏的正则表达式的基础上，在选择字段中显示的值，应该工作：

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

再次，这是不是最好的做法，但我认为它会工作。 NB，这将打破，如果其他任何数字都在下拉菜单选项前的价格。

文章来源: Assign value to dropdownlist items & display in label