Используйте jQuery для изменения значения метки
У меня есть метка, costLabel.
Что я хочу сделать, это изменить значение этого ярлыка в зависимости от выбранного значения выпадающего списка.
Это мой HTML:
<table>
<tr>
<td width="343">Package*</td>
<td colspan="4">
<select class="purple" name="package">
<option value="standard">Standard - €55 Monthly</option>
<option value="standardAnn">Standard - €49 Monthly</option>
<option value="premium">Premium - €99 Monthly</option>
<option value="premiumAnn" selected="selected">Premium - €89 Monthly</option>
<option value="platinum">Platinum - €149 Monthly</option>
<option value="platinumAnn">Platinum - €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 - €55 Monthly</option>
<option value="standardAnn">Standard - €49 Monthly</option>
<option value="premium">Premium - €99 Monthly</option>
<option value="premiumAnn" selected="selected">Premium - €89 Monthly</option>
<option value="platinum">Platinum - €149 Monthly</option>
<option value="platinumAnn">Platinum - €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'.