jquery - 下拉菜单的实时计算

Question

演示：http: //jsfiddle.net/NaUAL/61/

<select name="one" id="one" >
            <option value="0" >Select *</option>
            <option value="3000" >Plan A</option>
            <option value="6000" >Plan B</option>
            <option value="9000" >Plan C</option>

        </select>

<br />

<select name="two" id="two">
        <option>Please choose from above</option>
</select>

<div id="total"></div>

需要在“总” div 中有两个选择框的总和...

Answer 1

$("#one,#two").change(function() {
    $('#total').text(parseInt($("#one").val()) + parseInt($("#two").val()))
});

在这里检查我的小提琴

Answer 2

尝试

$("#one,#two").change(function(){
    var val1 = parseInt($('#one').val()) || 0, val2 = parseInt($('#two').val()) || 0;
    $('#total').text(val1 + val2)
})

演示：小提琴

Answer 3

演示

$('#two').change(function(){
    if(this.value != ''){
        $('#total').text(parseInt(this.value) + parseInt($("#one option:selected").val()));
    }
});

和

改变

second.html(html.join());

至

second.html(html.join()).change();

在

$("#one").change(function () {
    var first = $(this),
        second = $("#two"),
        key = first.val(),
        // instead of the original switch code
        vals = data[key] == undefined ? data.base : data[key],
        html = [];
    // create insert html before adding
    $.each(vals, function (i, val) {
        var v = val.split('_');
        html.push('<option value="' + v[1] + '">' + v[0] + '</option>')
    });
    // no need to empty the element before adding the new content
    second.html(html.join()).change(); //added .change()  here
});