将不同的结果添加到选择框的其中一个选项

时间:2014-12-09 09:44:33

标签: jquery function drop-down-menu calculator

我有一个简单的计算器,它从两个选择框中获取数据并进行计算。 但是我需要为该计算器提供额外的功能,例如当我在第一个选择框中选择第三个选项时,计算器只会给我特定的文本而不是计算。

这是我的代码:

HTML

<select>
<option value=“">Days</option>
<option data-price=“30” value=‘1'>1</option>
<option data-price=“40” value=‘2'>2 </option>
<option data-price=“50" value='3'>**3**</option>
</select>


<select>
<option value=“">People</option>
<option data-price=“10" value='1'>1 </option>
<option data-price="15" value='2'>2 </option>
<option data-price=“20" value='2'>3 </option>
</select>

JS

var $selects = $("select").change(function () {
    var total = 0;
    $selects.each(function () {
        var price = parseFloat($(this).find("option:selected").data("price")) || 0;
        total += price;
    })
    $(".count h2").text('€ ' + total);
})

2 个答案:

答案 0 :(得分:0)

试试这个:JSFIDDLE

$("select").on('change',function () {
    var total = 0;
    $('select').each(function () {
        var price = parseFloat($(this).find("option:selected").data("price")) || 0;
        total += price;
    })
    if($('select:eq(0)').find("option:selected").index() == 3){
        text = $('select:eq(0)').find("option:selected").text() ;
        $(".count h2").text(text);
    } else {
        $(".count h2").text('€ ' + total);
    }
})

答案 1 :(得分:0)

我得到了什么。它似乎有效。

$("select").on('change',function () {
var total = 0;
$('select').each(function () {
    var price = parseFloat($(this).find("option:selected").data("price")) || 0;
    total += price;
})
if($('select:eq(0)').find("option:selected").index() == 3){
    text = $('select:eq(0)').find("option:selected").val() ;
    $(".count h2").text(text);
} else {
    $(".count h2").text('€ ' + total);
}

})