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

回答

相關問題