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（＆lt; - 这部分工作正常）

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

您的订单：

房间：2
除臭剂：1

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

Answer 1

你可以这样做：

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

工作Fiddle

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() !== ''){
            $('<li />', {
                text: $selected.text() + ':' + $selected.val()
            }).appendTo($selections)
        }
    })
    $("strong").text('$ ' + total);
})

演示：Fiddle

Answer 3

通过在您的选择框中添加id来简化此操作，继承人fiddle

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

3 个答案: