Javascript 通过下拉菜单动态更新总计
我有一点进退两难,我试图让它,当用户选择一个选项从下拉框中,它动态更新在同一页上的总数,没有任何重新加载 换句话说,我在下拉框中有5个不同的选项(1,2,3,4,5),如果用户选择1,它需要通过一个简单的等式,然后在右边的“总计”框中输出,我希望在不重新加载的情况下动态执行此操作,有人能给我一些关于我应该使用什么的建议或提示,以及任何可能有用的教程(代码等…)Javascript 通过下拉菜单动态更新总计,javascript,jquery,Javascript,Jquery,我有一点进退两难,我试图让它,当用户选择一个选项从下拉框中,它动态更新在同一页上的总数,没有任何重新加载 换句话说,我在下拉框中有5个不同的选项(1,2,3,4,5),如果用户选择1,它需要通过一个简单的等式,然后在右边的“总计”框中输出,我希望在不重新加载的情况下动态执行此操作,有人能给我一些关于我应该使用什么的建议或提示,以及任何可能有用的教程(代码等…) 谢谢,这应该用Javascript来完成。我可以推荐使用jQuery作为Javascript框架 有了它,做你想做的事情真的很容易: $
谢谢,这应该用Javascript来完成。我可以推荐使用jQuery作为Javascript框架 有了它,做你想做的事情真的很容易:
$("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);
});
});
});
在计算页面中返回总计如果您不需要将其存储在数据库中,只需在客户端简单使用即可。 在“选择更改”中,您从设置为“只读”的输入中检索总数,然后添加用户选择的当前数字。请记住重置“选择”,否则用户无法添加两次相同的号码:
$(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);
});
});
有关html的工作示例,请参见此部分。不要询问代码。没有人会不付款就写。作为一个建议,我可以说:看一看Ajax。你能发布你的html代码吗?太棒了,我刚刚测试了这个,它可以工作了,我刚刚想到的另一件事是,假设我有两个不同的下拉列表,它们都需要插入到同一个等式中,我该怎么做?给它们选择相同的类名,例如
class=“calculate”
,然后将第1行中的jQuery选择器从$(“选择”)
更改为$(“.calculate”)
。说明:当使用类作为选择器时,只要具有该类的元素发生更改,就会调用change函数。由于在两个选择中使用相同的方程式,因此这是一种方法。如果你有不同的方程,那么你需要写不同的函数。