jquery将SUM的结果发送到div

我想：从select中获取值，与其他值进行求和，并将其放置在一个范围内。jquery将SUM的结果发送到div

我可以将值的结果发送到div/span，而无需使用按钮提交吗？那可能吗？

请看看我的小提琴：https://jsfiddle.net/groseler/3mq1ye1y/

HTML有点变化后

$(function() { 
 
    $("#field16-1").change(function() { 
 
    var val = $(this).val(); 
 
    var comEx = "150"; 
 
    var youngDriver = "100"; 
 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10); 
 
     
 
    }); 
 
    $("#result").html(resultSum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="field16-1"> 
 
    <option value="">Please select...</option> 
 
    <option value="120">120</option> 
 
    <option value="230">230</option> 
 
    <option value="260">260</option> 
 
</select> 
 
<div> 
 
Result should appear here ---> <span id="result" ></span></div>

来源

2016-08-11 grcoder

你的代码工作。你只有一些错字。您需要将$("#result").html(resultSum)添加到change回调中。

您无需提交任何内容。提交对表单并提交数据后，几乎总是去服务器端代码

$(function() { 
 
    $("#field16-1").change(function() { 
 
    var val = $(this).val(); 
 
    var comEx = "150"; 
 
    var youngDriver = "100"; 
 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10); 
 
    $("#result").html(resultSum); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="field16-1"> 
 
    <option value="">Please select...</option> 
 
    <option value="120">120</option> 
 
    <option value="230">230</option> 
 
    <option value="260">260</option> 
 
</select> 
 
<div> 
 
<span id="result" ></span></div>

来源

2016-08-11 17:21:20

完美！它的工作很棒！感谢您的时间:) – grcoder

@groseler有点细心:)。你的代码正在工作 –

你说得对，我必须要。在PC前面已经有太多的时间了...再次感谢您:) – grcoder

将$("#result").html(resultSum);功能

$(function() { 
    $("#field16-1").change(function() { 
    var val = $(this).val(); 
    var comEx = "150"; 
    var youngDriver = "100"; 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10); 
     $("#result").html(resultSum); 
    }); 

});

JSFIDDLE

来源

2016-08-11 17:23:20 brk

谢谢！我已经使用了@SurenSrapyan答案。 – grcoder

移动$("#result").html(resultSum);内声明在.change()之内如此每当select元素的值发生更改时，可以更改总和。

$(function() { 
 
    $("#field16-1").change(function() { 
 
    var val = $(this).val(); 
 
    var comEx = "150"; 
 
    var youngDriver = "100"; 
 
    var resultSum = parseInt(val, 10) + parseInt(comEx, 10) + parseInt(youngDriver, 10); 
 
    $("#result").html(resultSum); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="field16-1"> 
 
    <option value="">Please select...</option> 
 
    <option value="120">120</option> 
 
    <option value="230">230</option> 
 
    <option value="260">260</option> 
 
</select> 
 
<div> 
 
Result should appear here ---> <span id="result" ></span></div>

来源

2016-08-11 17:25:02 PeterKA

谢谢你的时间！我已经使用了@SurenSrapyan答案。 – grcoder

你所做的错误是，你把这个$("#result").html(resultSum);下拉的变化以外事件。

来源

2016-08-11 17:25:10

jquery将SUM的结果发送到div

回答

相关问题