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

Dynamically update total through dropdown

本文关键字：更新 动态 下拉列表      更新时间：2023-12-31

我有点进退两难，我正试图让它在用户从下拉框中选择一个选项时，它会在同一页面上动态更新总数，而无需重新加载。

换句话说，我在一个下拉框中有5个不同的选项（1，2，3，4，5），如果用户选择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);
})

//这是您必须在带有ddl 的页面中使用的jquery

$(document).ready(function () {
        $("#FloorId").change(function () {
            var ddlValue = $(this).val();
                $.getJSON('calculate.php', { "Id": ddlValue }, function (obj) {
                    $("total").text(obj.value);
                });
        });
    });

返回计算页面中的合计

如果不需要将其存储在数据库中，只需在客户端简单使用jquery即可。在select更改中，您从设置了"readonly"的输入中检索总数，然后添加用户选择的当前数字。记住重置选择，否则用户不能添加两次相同的号码：

$(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 的工作示例

相关文章：