将值分配给下拉列表项&显示在标签中 [英] Assign value to dropdownlist items & display in label

问题描述

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

这是我已经有的：

 < 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 style =font-size：14px;>我们每季度/每年递交< / p> 
< p style =font-size：14px;>参见< a href =＃dialogname =modal> Pricing< / a>更多细节
< / p>< / td> 
 
< td colspan =4>< label id =totalname =total>总成本：< / label>< / td> 
  

我现在将jQuery代码改变为下拉列表中的ACTUAL内容的标签值，但是我想为下拉列表的内容分配以下值：

标准=€165季度

StandardAnn =€588每年

Premium =€297 Quarterly

PremiumAnn =€1068每年

白金=€447 Quarterly

PlatinumAnn =€1608每年

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

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

我有一些麻烦适应代码，因为我是新来的jQuery和我'在压力下要这样做。有人可以帮我吗

解决方案

您可以制作一个要显示的文本数组

  var AnnualCosts = []; 
 AnnualCosts ['standard'] =€165 Quarterly; 
 AnnualCosts ['standardAnn'] =€588 Annual; 
 ... 
 
 
 $（document）.ready（
 function（）{
 $（'select [name = package]'）。更改（
 function（）{
 var newText = AnnualCosts [$（'option：selected'，this）.val（）]; 
 $（'＃total'）。总价：'+ newText）; 
} 
）; 
} 
  

不是最好的做法，但是你的整个代码都不是，这是快速和肮脏，不是那么可维护。

I have a dropdown list, what I would like to do is assign values to the items in the drop down list and then display these values in a label depending on which item is selected..

Here is what I have already:

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

The jQuery code I currently have changes the value of the label to the ACTUAL contents of the drop down list, however I want to assign the following values to the contents of the dropdownlist:

Standard = "€165 Quarterly"
StandardAnn = "€588 Annually"
Premium = "€297 Quarterly"
PremiumAnn = "€1068 Annually"
Platinum = "€447 Quarterly"
PlatinumAnn = "€1608 Annually"

This is so that when the user selects a certain package, the total price will be displayed to them as they either pay quarterly in advance, or annually in advance. Trying to prevent a shock when they get to the payment page! Here is my jQuery:

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

I'm having a bit of trouble adapting the code as I'm new to jQuery and I'm under pressure to have this done. Can someone help me, please?

解决方案

You could make an array of the text you want to display

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

not very best practice but your whole code isnt. this is quick and dirty. not so maintainable.

这篇关于将值分配给下拉列表项&显示在标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！