Assign value to dropdownlist items & display in label

Question

Hi,

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.

Answer 2

A quick and dirty regex, based on the value displayed in the select field, should work:

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

Again, this isn't the best practice, but I think it will work. NB that this will break if any other numbers are before the price in the drop down menu options.

Answer 3

It took me a while longer than I expected, and involves no re-writing of your html (that I can remember doing, anyway), but the following does work:

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>

Live demo: JS Bin

I realise that you've already accepted an answer, but it seemed a waste to throw away the last half hour of trying to remember how simple regex works... =)