多个选择下拉列表的计算

时间：2015-11-28 15:32:11

标签： javascript jquery html wordpress

我正在尝试计算选择下拉列表更改的金额。我需要该行的每一行计算前端，即小计，所有小计将在“总金额”的底部

我正在进行第一行的计算，但在某处出现问题，我无法正确找到。请帮帮我。

enter image description here

我的代码是

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

2 个答案:

答案 0 :(得分：2)

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

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

jQuery('.dynamic-fields > div.form-group select').on("change", function () {

使用：

jQuery(document).on("change", '.dynamic-fields > div.form-group select', function() {

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

例如，这些行现在是错误的：

    jQuery(".item_price").html(total);
    jQuery("input.itemprice").attr('value', total);

你打算这样做：

    jQuery(id+".item_price").html(total);
    jQuery(id+".itemprice").attr('value', total);

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

答案 1 :(得分：0)

更改行

jQuery('.dynamic-fields > div.form-group select').on("change", function() { ...

到

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时，函数将被执行。

相关问题
最新问题