通過下拉列表動態更新總數

Question

我有一個兩難的問題，我試圖做到這一點，以便當用戶從下拉框中選擇一個選項時，它可以動態更新同一頁面上的總數，而無需重新加載。

換句話說，我在下拉框（1,2,3,4,5）中有5個不同的選項，如果用戶選擇1，則需要通過一個簡單的方程式將其放入，然后在“總計”框中輸出正確，我想在不重新加載的情況下動態地執行此操作的問題，任何人都可以就我應該使用的內容以及可能有幫助的任何教程（代碼等）給我任何建議或提示。

謝謝

Answer 1

那應該用Javascript完成。 我可以建議使用jQuery作為Javascript框架http://jquery.com/

有了它，做您想要的事情真的很容易：

$("select").change(function(){
     var currentValue = parseInt($(this).find("option:selected").val());
     //do whatever calculation e.g
     result = currentValue * 2 + 1;
     //output result somewhere on the page e.g.
     $("#output").html(result);
})

Answer 2

//這是您必須在ddl頁面中使用的jquery

$(document).ready(function () {
        $("#FloorId").change(function () {
            var ddlValue = $(this).val();

                $.getJSON('calculate.php', { "Id": ddlValue }, function (obj) {
                    $("total").text(obj.value);
                });
        });
    });

在計算頁面中返回總計

Answer 3

如果您不需要將其存儲在數據庫中，只需在客戶端使用jquery即可。 在選擇更改上，您從設置為“只讀”的輸入中檢索總數，然后添加用戶選擇的當前數字。 記住要重置選擇，否則用戶不能兩次添加相同的數字：

$(document).ready(function(){
    $('select#add').change(function(){
     var  total = parseInt($('input#total').val())+parseInt($(this).val());
     $('input#total').val(total);
        $('select#add option[value=""]').attr('selected', true);
    });
});

請參閱此http://jsfiddle.net/3TMK8/以獲取有關html的有效示例