如何使用jquery动态获取总计

我有酒店房间的国籍及其相关价格的下拉列表。现在我想动态添加显示的价格并输出它

<div class="Total"></div>
<div class="rum_name">Room name</div>
<div class="nationality">
<select class="sel_nationality" name="nationality">
<option roomprice="30" value="63">SAARC</option>
<option roomprice="50" selected="selected" value="65">American/ European</option>
<option roomprice="45" value="67">Japnese/ Korean</option>
<option roomprice="38" value="69">All Others</option>
</select>
<div class="Price">
Price:
<span class="selectedPrice"></span>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var total = 0;
        $('.sel_nationality').change(function(){
            $price = $('option:selected', this).attr('roomprice');
            $parent = $(this).parents('.nationality');
            $parent.find('span.selectedPrice').text($price);
            $tot_price = $(this).val();
            $(this).each(function(){
                total += parseInt(this.value);
            })
           $('.Total').text(total); 
        })
           })
</script>

房间名称
南盟
美国/欧洲
日语/韩语
所有其他
价格：
$（文档）.ready（函数（）{
var合计=0；
$（'.sel_'）。更改（函数（）{
$price=$（'option:selected'，this.attr（'roomprice'）；
$parent=$（this.parents（'.national'）；
$parent.find（'span.selectedPrice'）.text（$price）；
$tot_price=$（this.val（）；
$（this）.each（function（）{
总计+=parseInt（此.value）；
})
$（'.Total'）.text（总计）；
})
})

可能有多个房间，每个房间都有上面的选项。现在我想根据输出的价格动态更改总数。

---

谢谢

您需要清除每次更改的总计，否则它将继续累积：

$(document).ready(function() {
    $('.sel_nationality').on('change', function() {
        var total = 0,  //reset the total, notice commas declearing vars
            $price = $('option:selected', this).attr('roomprice'),
            $parent = $(this).parents('.nationality'),
            $tot_price = this.value;

        $parent.find('span.selectedPrice').text($price);

        $('.sel_nationality').each(function() { //iterate all, not just this one
            total += parseInt(this.value, 10);  //use radix
        });
        $('.Total').text(total);
    });
})​;​

你需要迭代所有的

.sel_national

元素，而不仅仅是

这个

，因为这实际上并不需要一个each循环，并且清除变量，如果你不这样做，它们将是全局的，不管它们是否以dollarsign开头，它们仍然应该用

var

关键字清除

---

作为旁注，

roomprice

不是一个有效的属性，HTML5数据属性将是一个更好的选择。

您需要清除每次更改的总计，否则它将继续累积：

$(document).ready(function() {
    $('.sel_nationality').on('change', function() {
        var total = 0,  //reset the total, notice commas declearing vars
            $price = $('option:selected', this).attr('roomprice'),
            $parent = $(this).parents('.nationality'),
            $tot_price = this.value;

        $parent.find('span.selectedPrice').text($price);

        $('.sel_nationality').each(function() { //iterate all, not just this one
            total += parseInt(this.value, 10);  //use radix
        });
        $('.Total').text(total);
    });
})​;​

你需要迭代所有的

.sel_national

元素，而不仅仅是

这个

，因为这实际上并不需要一个each循环，并且清除变量，如果你不这样做，它们将是全局的，不管它们是否以dollarsign开头，它们仍然应该用

var

关键字清除

作为旁注，

roomprice

不是一个有效的属性，HTML5数据属性是一个更好的选择。

试试这个

 $(document).ready(function(){

    $('.sel_nationality').change(function(){
        var total = 0; //let the total be 0 whenever the chnages is made
        $price = $('option:selected', this).attr('roomprice');
        $parent = $(this).parents('.nationality');
        $parent.find('span.selectedPrice').text($price);
        $tot_price = $(this).val();
        $(this).each(function(){
            total += parseInt(this.value);
        })
       $('.Total').text(total); 
    })
  })

试试这个

 $(document).ready(function(){

    $('.sel_nationality').change(function(){
        var total = 0; //let the total be 0 whenever the chnages is made
        $price = $('option:selected', this).attr('roomprice');
        $parent = $(this).parents('.nationality');
        $parent.find('span.selectedPrice').text($price);
        $tot_price = $(this).val();
        $(this).each(function(){
            total += parseInt(this.value);
        })
       $('.Total').text(total); 
    })
  })

---

好吧，伙计们，我想我不能给你们正确的想法，我的问题，但我找到了解决办法

<script type="text/javascript">
    $(document).ready(function(){
        var total = 0;
        $('.selectedPrice').each(function(){
            total = +$(this).text()+ total;
        });
        $('.Total').text(total); 
        $('.sel_nationality').change(function(){
            $price = $('option:selected', this).attr('roomprice');
            $parent = $(this).parents('.nationality');
            $parent.find('span.selectedPrice').text($price);
            var total = 0;
            $('.selectedPrice').each(function(){
                total = +$(this).text()+ total;
            });
           $('.Total').text(total); 

        })


    })
</script>

$（文档）.ready（函数（）{
var合计=0；
$（'.selectedPrice'）。每个（函数（）{
总计=+$（this）.text（）+总计；
});
$（'.Total'）.text（总计）；
$（'.sel_'）。更改（函数（）{
$price=$（'option:selected'，this.attr（'roomprice'）；
$parent=$（this.parents（'.national'）；
$parent.find（'span.selectedPrice'）.text（$price）；
var合计=0；
$（'.selectedPrice'）。每个（函数（）{
总计=+$（this）.text（）+总计；
});
$（'.Total'）.text（总计）；
})
})

---

无论如何，谢谢你们宝贵的时间，如果我不能给你们这个想法，我很抱歉。

好了，伙计们，我想我不能给你们我的问题的正确想法，但我找到了解决办法

<script type="text/javascript">
    $(document).ready(function(){
        var total = 0;
        $('.selectedPrice').each(function(){
            total = +$(this).text()+ total;
        });
        $('.Total').text(total); 
        $('.sel_nationality').change(function(){
            $price = $('option:selected', this).attr('roomprice');
            $parent = $(this).parents('.nationality');
            $parent.find('span.selectedPrice').text($price);
            var total = 0;
            $('.selectedPrice').each(function(){
                total = +$(this).text()+ total;
            });
           $('.Total').text(total); 

        })


    })
</script>

$（文档）.ready（函数（）{
var合计=0；
$（'.selectedPrice'）。每个（函数（）{
总计=+$（this）.text（）+总计；
});
$（'.Total'）.text（总计）；
$（'.sel_'）。更改（函数（）{
$price=$（'option:selected'，this.attr（'roomprice'）；
$parent=$（this.parents（'.national'）；
$parent.find（'span.selectedPrice'）.text（$price）；
var合计=0；
$（'.selectedPrice'）。每个（函数（）{
总计=+$（this）.text（）+总计；
});
$（'.Total'）.text（总计）；
})
})

---

无论如何，感谢你们宝贵的时间，如果我不能告诉你们这个想法，我很抱歉。

萨米，我想你们会发现，你们的解决方案简化为：

$(document).ready(function() {
    $('.sel_nationality').change(function() {
        var $price = $('option:selected', this).attr('roomprice');//remember to localize vars
        $(this).closest('.nationality').find('.selectedPrice').text($price);
        var total = 0;
        $('.selectedPrice').each(function() {
            total += Number($(this).text());
        });
        $('.Total').text(total);
    }).trigger('change');
});

---

通过触发选择菜单“更改”事件，您将无需重复总计算并显示最初选择的价格。

Sammy我想您会发现您的解决方案简化为：

$(document).ready(function() {
    $('.sel_nationality').change(function() {
        var $price = $('option:selected', this).attr('roomprice');//remember to localize vars
        $(this).closest('.nationality').find('.selectedPrice').text($price);
        var total = 0;
        $('.selectedPrice').each(function() {
            total += Number($(this).text());
        });
        $('.Total').text(total);
    }).trigger('change');
});

---

通过触发选择菜单“更改”事件，您将无需重复总计算并显示最初选择的价格。

请使用parseInt（val，10）。我是说基数10@穆拉里听不懂你的话。你能详细解释一下吗。你在说什么，萨米，一个房间有效，但多个房间无效？@sammy请看。这是对您的代码的一个小更正，不是对您的密码的回答question@Beetroot-Beetroot我有多个房间，每个房间的价格都不一样。现在，对于下拉列表中选择的国籍数量，我希望总计显示在同一个房间的某个地方问题是，每当我两次更改选项而不是只取所选的值时，它与以前的总数相加，所以我得到的总数是错误的。请使用parseInt（val，10）。我是说基数10@穆拉里听不懂你的话。你能详细解释一下吗。你在说什么，萨米，一个房间有效，但多个房间无效？@sammy请看。这是对您的代码的一个小更正，不是对您的密码的回答question@Beetroot-Beetroot我有多个房间，每个房间的价格都不一样。现在，对于下拉列表中选择的国籍数量，我希望总计显示在同一个房间的某个地方问题是每当我两次更改选项而不是只取所选的值时，它会与以前的总数相加，所以我总算搞错了。谢谢你发帖子让我了解新事物。对于像我这样的新手来说，这是非常有帮助和有知识的。谢谢你发帖子让我了解新事物。对于像我这样的新手来说，这是非常有帮助和有知识的。