Присвойте значение элементам выпадающего списка и отобразите в ярлыке

Question

У меня есть раскрывающийся список, и я хотел бы назначить значения элементам в раскрывающемся списке, а затем отобразить эти значения в метке в зависимости от того, какой элемент выбран.

Вот что у меня уже есть:

           <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

Это заняло у меня больше времени, чем я ожидал, и не требует переписывания вашего 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 Bin

Я понимаю, что вы уже приняли ответ, но это казалось пустой тратойотбросьте последние полчаса, пытаясь вспомнить, как работает простое регулярное выражение ... =)

Answer 2

Вы можете сделать массив текста, который вы хотите отобразить

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 3

Быстрое и грязное регулярное выражение, основанное на значении, отображаемом в поле выбора, должно работать:

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

Опять же, это не лучшая практика, но я думаю, что это сработает. Обратите внимание, что это сломается, если в выпадающем меню появятся другие цифры до цены.