javascript - 尝试在价格计算器上显示选定的服务

Question

我有一个简单的价格计算器的工作示例，它从数据库中提取价格(通过 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() !== ''){
            $('<li />', {
                text: $selected.text() + ':' + $selected.val()
            }).appendTo($selections)
        }
    })
    $("strong").text('$ ' + total);
})

我希望它的工作方式是:

价格:$X(<-- 这部分工作正常)

if they select 2 rooms and 1 room deodorizer and nothing else. I want it to show

您的订单:

房间:2
除臭剂:1个

这就是为什么他们可以对刚刚选择的服务进行分割。当然，如果取消选择，比如说除臭剂，我希望除了房间(或剩下的任何东西)之外的所有东西都清除

Answer 1

你可以这样做:

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

工作中Fiddle