zoukankan      html  css  js  c++  java
  • 选择下拉列表,出现不同数据,并计算

    点击下拉框,出现缴纳电费,水费,燃气费三个选项。选择其一,下边对应的单价改变,选择数量,进行计算。

    //结构
    <select name="type" class="form-control feeName"
    									onchange="show_sub(this.options[this.options.selectedIndex].value)">
    									
    									<c:forEach items="${datas}" var="da">
    									<option value="${da.type}" price="${da.val}">${da.name}</option>
    									</c:forEach>
    	
    								</select>
    

      

    //计算 

    var firstPrice = parseFloat($(".feeName").children("option:first-child").attr("price"));
    $("#price").val(firstPrice.toFixed(2));
    var num = parseInt($("#num").val());
    var money = firstPrice*num;
    $("#totalPrice").text(money.toFixed(2));
    add();

    //选择3个选项获取不同的单价
    function show_sub(v) {
    parseInt($("#num").val(1));
    if (v == 1) {
    var firstPrice = parseFloat($(".feeName").children("option:first-child").attr("price"));
    var money = firstPrice*num;
    $("#price").val(firstPrice.toFixed(2));
    $("#totalPrice").text(money.toFixed(2));
    }
    if (v == 2) {
    var secondPrice = parseFloat($(".feeName").children("option:nth-child(2)").attr("price"));
    var money = secondPrice*num;
    $("#price").val(secondPrice.toFixed(2));
    $("#totalPrice").text(money.toFixed(2));

    }
    if (v == 3) {
    var lastPrice = parseFloat($(".feeName").children("option:last-child").attr("price"));
    var money = lastPrice*num;
    $("#price").val(lastPrice.toFixed(2));
    $("#totalPrice").text(money.toFixed(2));
    }
    }

    //购物车加减
    function add() {

    $(".addNum").click(function() {
    var numTextVal = $(this).parent().find("#num");
    numTextVal.val(parseInt(numTextVal.val()) + 1);
    setTotal();
    });

    $(".minNum").click(function() {
    var numTextVal = $(this).parent().find("#num");
    numTextVal.val(parseInt(numTextVal.val()) - 1);
    if (parseInt(numTextVal.val()) < 1) {
    numTextVal.val(1);
    };
    setTotal();
    });

    function setTotal() {
    var s = 0;
    $("#formData").each(function() {
    s += parseInt($(this).find('input[id*=num]').val()) * parseFloat($(this).find('input[id*=price]').val());
    });

    $("#totalPrice").text(s.toFixed(2));
    };
    setTotal();

    };

    //输完数量自动计算
    $(function(){
    $("#num").change(function(){
    $("#totalPrice").text($(this).val()*$("#price").val());

    $(".mT1").each(function(){
    var money = parseInt($(this).text());
    function toThousands(num) {
    var result = [ ], counter = 0;
    num = (num || 0).toString().split('');
    for (var i = num.length - 1; i >= 0; i--) {
    counter++;
    result.unshift(num[i]);
    if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    return result.join('');
    }
    $(this).text(toThousands(money));
    });
    });
    })

      

  • 相关阅读:
    c# 基础
    摹客插件,自动识别画板大小!
    知道这10点,你才是真正会画线框图
    在线原型实例(可编辑):图片社交-InstagraAPP
    16 种原型设计工具及其使用场景
    微博APP在线原型实例(可编辑)
    5款前端切图工具大比拼:谁是最强切图神器
    你真的了解这4款协作设计吗
    nvm 安装及使用(npm版本管理工具)
    webpack入门四 安装vue,并打包
  • 原文地址:https://www.cnblogs.com/TigerZhang-home/p/7459813.html
Copyright © 2011-2022 走看看