文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >关于多重选择下拉列表的计算

问关于多重选择下拉列表的计算
EN

Stack Overflow用户
提问于 2015-11-28 15:32:10
回答 2查看 1.1K关注 0票数 0

我正在试着计算选择下拉菜单的变化量。我需要该行前面的每一行计算，即小计，所有小计都在“总金额”的底部。

我正在得到第一行的计算，但是在某个地方有问题，我无法正确地找到。请帮帮我。

​

​

我的代码是

​

代码语言：javascript
运行
复制
jQuery(document).ready(function() {
	var bookIndex = 1;
    jQuery('#orderform')
        // Add button click handler
		
        .on('click', '.addButton', function() {
            bookIndex++;
			
            var $template = jQuery('#bookTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .addClass('form-group')
                                .removeAttr('id')
                                .removeAttr('style')
								.attr('id', "row"+bookIndex)
                                .attr('data-index', bookIndex)
                                .insertBefore($template);
			jQuery("#row"+bookIndex+' .addprice span').addClass('item_price');
			jQuery("#row"+bookIndex+' .addprice input').addClass('itemprice');
			jQuery("#row"+bookIndex+' > div ').removeClass('addprice');

            
            // Add new fields
            // Note that we also pass the validator rules for new field as the third parameter
			
			var totalamount = 0;
				var price =0;
				jQuery('.dynamic-fields > .form-group').each(function () {
					price = jQuery("span.item_price").html();
					totalamount += parseFloat( price );
				});
				
				jQuery("#totalamount > span").html(totalamount);
				jQuery("#totalamount").attr('data-amount', totalamount);
           
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row  = jQuery(this).parents('.form-group'),
                index = $row.attr('data-book-index');

            // Remove fields
           

            // Remove element containing the fields
            $row.remove();
				var totalamount = 0;
				var price =0;
				jQuery('.dynamic-fields > .form-group').each(function () {
					price = jQuery("span.item_price").html(); 
					totalamount += parseFloat( price );
				});
				
				jQuery("#totalamount > span").html(totalamount);
				jQuery("#totalamount").attr('data-amount', totalamount);
			
        });
});



jQuery(document).ready(function(){
	var totalamount = 0;
	var price =0;
	jQuery('.dynamic-fields > .form-group').each(function () {
		price = jQuery("span.item_price").html();
		totalamount += parseFloat( price );
	});
    
	jQuery("#totalamount > span").html(totalamount);
	jQuery("#totalamount").attr('data-amount', totalamount);
	
})

jQuery(".dynamic-fields").each(function() {
		var tpy = parseInt(jQuery(".service_type option:selected").val());
		var clths = parseInt( jQuery(".cloths option:selected").val() );
		var quantity = parseInt( jQuery(".quantity option:selected").val() );
		
		var total;
		total= tpy + clths * quantity; 
		jQuery("span.item_price").html(total);
		jQuery("input.itemprice").attr('value', total);
});

jQuery(document).on("change", '.dynamic-fields > div.form-group select', function() {
    var total = 0; 
	var id  = jQuery(this).parent().parent().attr('id');
	var index  = jQuery(this).parent().parent().attr('data-index');
	id = '#'+id+' '; //alert(id); //alert(index);
    //jQuery('.form-group').each(function () {
		
        var tpy 		= jQuery(id+'.service_type option:selected').val();
		var clths 		= jQuery(id+'.cloths option:selected').val();
		var quantity 	= jQuery(id+'.quantity option:selected').val();
		
		total= ( parseInt(tpy) + parseInt(clths) ) * parseInt(quantity); 
		jQuery(id+".item_price").html(total);
	jQuery(id+".itemprice").attr('value', total);
    //});
	var totalamount = 0;
	var price =0;
	jQuery('.accept-checkbox.dynamic-fields > div.form-group').each(function () {
		price = jQuery("span.item_price").html(); 
		totalamount += parseFloat( price );
	});
    
	jQuery("#totalamount > span").html(totalamount);
	jQuery("#totalamount").attr('data-amount', totalamount);
	
});
代码语言：javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form name="neworder" action="<?php the_permalink(); ?>" method="post" id="orderform"> 
<div class="accept-checkbox dynamic-fields">
			
			 <div class="form-group" id="row1" data-index="1">
				<div class="col-sm-3">
					<select class="service_type" name="service_type[]">
						<option value="20">Iron</option>
						<option value="30">Wash</option>
						<option value="40">Wash &amp; Iron</option>
						<option value="50">Dryclean</option>
					</select>
				</div>
				<div class="col-sm-3">
					<select class="cloths" name="cloths[]">
						<option value="10">Shirt</option>
						<option value="20">Tshirt</option>
						<option value="30">Kurta</option>
						<option value="40">Jeans</option>
						<option value="50">Trouser</option>
						<option value="60">Trouser</option>
					</select>
				</div>
				<div class="col-sm-3">
					<select class="quantity" name="quantity[]">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="3">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
					</select>
				</div>
				<div class="col-sm-2">
					<span class="item_price">30</span>
					<input type="hidden" class="itemprice" value="00"/> 
				</div>
				<div class="col-sm-1">
					<button class="btn btn-default addButton" type="button"><i class="fa fa-plus">+</i></button>
				</div>
			</div>

			<!-- The template for adding new field -->
			
			<div id="bookTemplate" class=" hide" style="display: none;">
				<div class="col-sm-3">
					<select class="service_type" name="service_type[]">
						<option value="20">Iron</option>
						<option value="30">Wash</option>
						<option value="40">Wash &amp; Iron</option>
						<option value="50">Dryclean</option>
					</select>
				</div>
				<div class="col-sm-3">
					<select class="cloths" name="cloths[]"> 
						<option value="10">Shirt</option>
						<option value="20">Tshirt</option>
						<option value="30">Kurta</option>
						<option value="40">Jeans</option>
						<option value="50">Trouser</option>
						<option value="60">Trouser</option>
					</select>
				</div>
				<div class="col-sm-3">
					<select class="quantity" name="quantity[]">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="3">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
					</select>
				</div>
				<div class="col-sm-2 addprice">
					<span >30</span>
					<input type="hidden" value="00"/> 
				</div>
				<div class="col-xs-1">
					<button class="btn btn-default removeButton" type="button"><i class="fa fa-minus"> - </i></button>
				</div>
			</div>
		</div>
		<div class="row"> 
				<div class="col-md-5 pull-right">
					<span><strong>Total Amount : </strong></span><span id="totalamount"> <span>00.00</span>/- </span>
				</div>
			</div>
  </form>

​

javascript
jquery
html
wordpress
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-28 15:52:28

添加的元素没有事件处理程序。

若要为当前和未来的元素编写一个事件处理程序，请替换如下：

代码语言：javascript
运行
复制
jQuery('.dynamic-fields > div.form-group select').on("change", function () {

通过以下方式：

代码语言：javascript
运行
复制
jQuery(document).on("change", '.dynamic-fields > div.form-group select', function() {

请注意，您的代码仍然存在许多问题。你最好保留你的数量、价格等。(也)在变量中，而不是每次从html属性中重新读取它们。

例如，这些行现在错了：

代码语言：javascript
运行
复制
    jQuery(".item_price").html(total);
    jQuery("input.itemprice").attr('value', total);

你的本意是：

代码语言：javascript
运行
复制
    jQuery(id+".item_price").html(total);
    jQuery(id+".itemprice").attr('value', total);

..。还有更多类似的问题，但如果我是您，我会重构这段代码，以减少对html属性计算总数的依赖。

票数 2
EN

Stack Overflow用户

发布于 2015-11-28 15:58:01

换行

代码语言：javascript
运行
复制
jQuery('.dynamic-fields > div.form-group select').on("change", function() { ...

至

代码语言：javascript
运行
复制
jQuery(document).on("change", '.dynamic-fields > div.form-group select', function() { ...

因为EventListener change绑定到DOM中的元素一次，所以代码是用选择器.dynamic-fields > div.form-group select执行的。

现在，EventListener设置为文档，当event.target是.dynamic-fields > div.form-group select时执行函数。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/33973080

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档