通过下拉列表动态更新总数

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的有效示例