试图在价格计算器上显示所选服务

我有一个简单的价格计算器的工作示例，它从数据库中提取价格（通过Laravel 4和Blade模板引擎），客户可以选择服务，价格计算器将输出价格。

它工作得很好，但我希望它能在价格之下显示所选服务。 我有一个例子，但不完全是我想要的。 http://jsfiddle.net/arunpjohny/xf9Fp/2/

var $selections = $('#selections'); var $selects = $("select").change(function () { var total = 0; $selections.empty(); $selects.each(function () { var $selected = $(this).find("option:selected"); var price = parseFloat($selected.data("price")) || 0; total += price; if($selected.val() !== ''){ $('
', { text: $selected.text() + ':' + $selected.val() }).appendTo($selections) } }) $("strong").text('$ ' + total); }) 

我希望它如何工作是：

价格：$ X（< – 这部分工作正常）

如果他们选择2个房间和1个房间除臭剂，没有别的。 我想要它展示

你的订单：

房间：2
除臭剂：1

这就是为什么他们可以分解他们刚刚选择的服务。 当然，如果取消选择让我们说除臭剂，我希望所有这些都能清除，除了房间（或任何剩下的）

Answer 1

你可以这样做：

 $('
', { text: $(this).parent().clone().children().remove().end().text()+" "+$selected.text() + ':' + $selected.val() }).appendTo($selections) 

工作小提琴

Answer 2

尝试

 var $selections = $('#selections'); var $selects = $("select").change(function () { var total = 0; $selections.empty(); $selects.each(function () { var $selected = $(this).find("option:selected"); var price = parseFloat($selected.data("price")) || 0; total += price; if($selected.val() !== ''){ $('
', { text: $selected.text() + ':' + $selected.val() }).appendTo($selections) } }) $("strong").text('$ ' + total); }) 

演示： 小提琴

Answer 3

通过在你的选择框中添加id来简化这一点，这就是小提琴