开发者

Assign value to dropdownlist items & display in label

开发者 https://www.devze.com 2023-01-19 02:17 出处:网络
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..

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 - &开发者_高级运维amp;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 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... =)


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: &euro;' + 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.

0

精彩评论

暂无评论...
验证码 换一张
取 消