Используйте jQuery для изменения значения метки

У меня есть метка, costLabel.

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

Это мой HTML:

<table>
  <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>We bills quarterly/annually in advance</p>
      <p>See <a href="#dialog" name="modal">Pricing</a> for more details</p>
    </td>
    <td colspan="4"><label id="costlabel" name="costlabel">Total Cost:</label></td>

  <tr>
</table>

Значения, которые входят в метку стоимости,

Стандарт = "€ 165 ежеквартально"
StandardAnn = "€ 588 Ежегодно"
Премиум = "€ 297 ежеквартально"
PremiumAnn = "€ 1068 Ежегодно"
Platinum = "€ 447 Quarterly"
PlatinumAnn = "€ 1608 Ежегодно"

У меня был следующий код, который рассчитал стоимость в зависимости от выпадающего меню, но с тех пор форма регистрации изменилась, чтобы быть более простой (т.е. выбор скидки не исчез), и у меня возникла небольшая проблема при адаптации jQuery. Может кто-нибудь помочь?

$(function() {
  $("#discountselection, select[name=package], input[name=discount]").
    change(function() {
      var
        selected_value = $("#discountselection").val(),
        discount = [12, 24, 36],
        package = $("select[name=package]").val(),
        package_prices = {'standard': 49, 'premium': 85, 'platinum': 134 },
        cost = package_prices[package] * discount[selected_value-1];

      $("#costlabel").val(cost);
    });
});

Ответ 1

Кажется, у меня есть слепое пятно относительно вашей структуры html, но я думаю, что это то, что вы ищете. Он должен найти выбранную в данный момент опцию из ввода select, назначить ее текст переменной newVal, а затем применить эту переменную к атрибуту value метки #costLabel:

JQuery

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

HTML:

  <form name="thisForm" id="thisForm" action="#" method="post">
  <fieldset>
    <select name="package" id="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="costLabel" name="costLabel">Total price: </label>
    </fieldset>
  </form>

Работая демо выше: JS Bin

Ответ 2

val() больше похож на ярлык для attr ('value'). Для использования используйте текст() или html() вместо

Ответ 3

.text верен, для меня работает следующий код:

$('#lb'+(n+1)).text(a[i].attributes[n].name+": "+ a[i].attributes[n].value);

Ответ 4

Проверка (HTML5): Атрибут 'name' не является допустимым атрибутом элемента 'label'.