issue with change function on select option in Jquery

Question

I have a little select form. When I change options using JQUERY, new suitable price appears inside .prices. AN old price is 100 $. if user is student or pupil, I want make him discount -10 $. So when user choose option student or pupil price is changed from 100 to 90$. But when user choose option again to pupil it must not be change the price, but it changes it to 80 $. Again when choose option student, price was changed to 70. I exactly want that if user choose option: student or pupil, there will be -10 $ discount.

you can ask why I used each function? The option: other is selected and first time page shows price 110$. each function fixed this problem. I have also JS fiddle, you can check it. Sorry for my English Language.

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);
  }

});

Rory McCrossan · Accepted Answer · 2013-11-19 08:29:05Z

2

You only need the change handler in your jQuery code. Also, you need to keep a static base price value so that you can do all calculations on that instead of keeping a running total of all changes. Try this:

$("#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();

Example fiddle

answered Nov 19, 2013 at 8:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kyle Muir Over a year ago

@RoryMcCrossan does this work for non-HTML5 solutions? I haven't seen .data used this way before so I am curious.

Rashad Over a year ago

But data pace price is not always 100$. It depends on another select option

Rory McCrossan Over a year ago

Then please update your OP with the information which sets the initial price.

Rory McCrossan Over a year ago

@Kyle HTML5 is supported in all browsers now, so it's best to use that instead of the outdated HTML4.

codingrose · Accepted Answer · 2013-11-19 08:35:09Z

0

Try this:

$( "#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 here.

edited Nov 19, 2013 at 8:35

answered Nov 19, 2013 at 8:28

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

1 Comment

Rashad Over a year ago

GOOD work. But look, when I change option to student, then again to Other, it shows price :110 $

Collectives™ on Stack Overflow

issue with change function on select option in Jquery

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related