Question

I have a drop down selection box and using jQuery if statements i want to set a div element with some text, heres my code:

<select id="drop">
    <option value="Select">Choose an option...</option> 
    <option value="Blue" stock="0">Blue</option>
    <option value="Pink,15.00" stock="1">Pink</option>
    <option value="Red" stock="2">Red</option>  
</select>



$('#drop').change(function() {

   if ($(this).val() == 'Pink,15.00') { 
     $(".price-tag > span").text("Pink 15.00");
   }

  if ($(this).val() == 'Red') { 
     $(".price-tag > span").text("Red 5.00");
  }

  else {
     $(".price-tag > span").text("5.00");

  }  
});

The above code works fine when i select the Red option in the dropdown but it’s not working when the Pink is selected, i believe jQuery has problems with the if statement .val containing a comma or fullstop “Pink,15.00”.

A way i could get around this is by checking the text in the option, not the value. Not sure how to do this though, something like option:selected.

Help appreciated.

Thanks

Answer 1

Add an else before the second if statement. Currently, the last else condition is always executed when the value is not red, overwriting the previously set “pink”.

$('#drop').change(function() {
    if ($(this).val() == 'Pink,15.00') { 
       $(".price-tag > span").text("Pink 15.00");
    }
    else if ($(this).val() == 'Red') { //Add else!
       $(".price-tag > span").text("Red 5.00");
    }
    else {
       $(".price-tag > span").text("5.00");
    }  
});