试图在价格计算器上显示选定的服务 [英] Trying to show selected services on price calculator

查看:81
本文介绍了试图在价格计算器上显示选定的服务的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a working example of a simple price calculator that pulls the price from a database (via Laravel 4 and Blade template engine) and a customer can select the services and the price calculator will output the price.

它工作得很好,但是我希望它以低于价格的价格显示所选的服务.我这里有一个例子,但并不完全是我要找的东西. http://jsfiddle.net/arunpjohny/xf9Fp/2/

It works very well however I would like it to show the selected services right below the price. An example I have is here but not exactly what I was looking for. 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(<-该部分效果很好)

Price: $X (<-- this part works fine)

如果他们选择2个房间和1个房间除臭剂,则别无选择.我希望它显示

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

您的订单:

Your order:

客房:2个
除臭剂:1

Rooms: 2
Deodorizer: 1

为什么他们可以对刚刚选择的服务进行细分.当然,如果取消选择,比如说除臭剂,我希望除房间(或剩下的东西)之外的所有东西都清除掉

that why they can have a breakdown of the services they just selected. Also of course if the de-select let's say deodorizer I would want all that to clear except the rooms (or whatever is left)

推荐答案

您可以这样做:

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

正在工作小提琴

这篇关于试图在价格计算器上显示选定的服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆