0

我有一个简单的价格计算器的工作示例，它从数据库中提取价格（通过 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 美元（<-- 这部分工作正常）

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

你的订单：

房间：2
除臭剂：1

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

4

3 回答 3

2

你可以这样做：

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

工作小提琴

于 2013-09-06T15:00:17.160 回答
1

尝试

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);
})

演示：小提琴

于 2013-09-06T15:57:52.773 回答
0

id通过将's 添加到您的选择框中，这很容易，这是小提琴

于 2013-09-06T14:58:15.977 回答