Question

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?

Answer 1

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.