在Jquery中选择选项的更改函数问题

Question

我有一点选择形式。 当我使用JQUERY更改选项时， .prices出现新的合适价格。 旧的价格是100美元。 如果用户是学生或学生，我想让他折扣-10 $。 因此，当用户选择选项时，学生或学生的价格从100变为90 $。 但是当用户再次向学生选择选项时，它不能改变价格，而是将其改为80 $。 再次选择期权学生时，价格变为70.我确实希望如果用户选择选项：学生或学生，将有-10美元的折扣。

你可以问我为什么使用each function ？ 选项： other被选中，第一次页面显示价格110 $。 每个功能都解决了这个问题 我也有JS小提琴，你可以检查一下。 抱歉我的英语。

DEMO

HTML

<select name="status" id="status">
    <option value="1">Student</option>
    <option value="2">Pupil</option>
    <option value="3" selected>Other</option>
</select>

<div class="price">
    <span class="prices">100</span> $
</div>

JQUERY

$( "#status" ).change(function () {

    var price2 = ($(".prices").text());

    $('.prices').text('');

    var value = $( "#status option:selected" ).val();

    if(value=="3")
    {     
        new_price2 = +price2 +  +10;       
        $('.prices').append(new_price2);
    }

    else
    {
        new_price2 = price2 - 10;     
        $('.prices').append(new_price2);
    }
})
.change();

$('#status option').each(function() {

 if(this.selected)
  {
    var price2 = ($(".prices").html());
    $('.prices').html('');

    new_price2 = price2 - 10;
    $('.prices').append(new_price2);
  }

});

Answer 1

您只需要jQuery代码中的change处理程序。 此外，您需要保留静态基本价格值，以便您可以对其进行所有计算，而不是保持所有更改的运行总计。 尝试这个：

$("#status").change(function () {
    var price2 = $(this).data('base-price');
    if ($("option:selected", this).val() == "3") {
        new_price2 = price2;
    } else {
        new_price2 = price2 - 10;
    }
    $('.prices').text(new_price2);
}).change();

示例小提琴

Answer 2

尝试这个：

$( "#status" ).change(function () {
    var price2 = ($(".prices").text());
    $('.prices').text('');
    var value = $( "#status option:selected" ).val();
    if(value=="3"){
        new_price2 = price2;        
    }
    else{
        new_price2 = price2 - 10;
    }
    $('.prices').html(new_price2);
})

DEMO在这里。