Как сделать динамический подсчет цены в форме?

Question

[Антон]

Здравствуйте!

Имеется форма с некоторыми select. Посчитать цену, находящуюся в value каждого option я могу, но атрибут value мне нужен для передачи другого значения в php скрипт. Поэтому я поместил цену в атрибут title. Пример:

<select class="count" name="money" id="money">
	<option title="100" value="one">Сто</option>
	<option title="200" value="two">Двести</option>
	<option title="300" value="three">Триста</option>
</select>
<select class="count" name="money2" id="money2">
	<option title="500" value="five">Пятьсот</option>
	<option title="600" value="six">Шестьсот</option>
	<option title="700" value="seven">Семьсот</option>
</select>

Помогите к этому примеру переписать данный JS:

<script>
$(document).ready(function(){
	$(".count").change(function () {
		var money = parseInt($('#money').val());
		var money2 = parseInt($('#money2').val());
		var total = money + money2;

		$('span.total').replaceWith('<span class="total">' + total + '</span>');
	});
});
</script>

Заранее спасибо за вашу помощь.

Answer 1

[sim3x]

stackoverflow.com/questions/14155377/html5-and-dat...

<option data-price='500' value="five">Пятьсот</option>

var price = $('.count option:selected').data('price');

Comments

[Антон]

Спасибо вам большое.

Answer 2

[Александр Таратин]

jsfiddle.net/zogqL9w1

Comments

[Александр Таратин]

Но так делать не хорошо

[Антон]

Хм. Доходил до parseInt($('#money').attr('title')) - не работало. Ваш способ работает. А почему нехорошо?

[vdem]

@proFox 1) Не работало, потому что у <select> похоже не установлен атрибут title (который всплывающая подсказка); 2) Нехорошо, потому что title предназначен для других целей.

[Антон]

@Taraflex хорошо, учту.

Answer 3

[vdem]

1. <option data-amount="100" value="one">Сто</option>
2.

$(document).ready(function(){
	$(".count").change(function () {
		var money = parseInt($('#money option:selected').data('amount'));
		var money2 = parseInt($('#money2 option:selected').data('amount'));
		var total = money + money2;
		$('span.total').replaceWith('<span class="total">' + total + '</span>');
	});
});