This is my first time using jQuery and I am pleased to get my first attempt working.
With the help of this post I managed to achieve what I wanted to do, but I can’t help feeling that there is a much neater way of doing this but cannot work out how.
Basically I have a page containing dropdowns that change a price depending on the service level wanted.
When the select options are changed the color of the price also changes.
These prices come from a db so I have put a basic version here where the price doesn’t change but the text color does.
The id of each dropdown increments like this – optn0x0, optn1x0 etc
and the div id of the price increments like this pricediv0, pricediv1 etc
What I would like to do is combine the jQuery code into one function as there are 13 dropdowns so it will be a lot of code the way I have done it.
Here is the code
<style>
.saver{color:red;}
.express{color:black;}
.expressplus{color:blue;}
</style>
<html>
<select class="prodoption" name="optn0" id="optn0x0"><option value="68">Saver</option>
<option value="69" selected="selected">Express</option>
<option value="70">ExpressPlus</option>
</select>
<td class="cobll cpdll"><div class="prod3price"><span class="price" id="pricediv0">74.00</span></div></td>
<select class="prodoption" name="optn0" id="optn1x0"><option value="68">Saver</option>
<option value="69" selected="selected">Express</option>
<option value="70">ExpressPlus</option>
</select>
<td class="cobll cpdll"><div class="prod3price"><span class="price" id="pricediv1">74.00</span></div></td>
</html>
and here is the jQuery
$('select[id^=optn0x0]').change(function(){
$('#pricediv0').removeClass('saver express expressplus').addClass(
$(this).find('option:selected').text().toLowerCase()
);
})
.change();
$('select[id^=optn1x0]').change(function(){
$('#pricediv1').removeClass('saver express expressplus').addClass(
$(this).find('option:selected').text().toLowerCase()
);
})
.change();
Any suggestions would be most appreciated.
Hi,
Thank you all for your answers on this
I now have two working solutions:
$('select[id^="optn"]').change(function(){
var ind = $(this).attr('id').replace('optn', '')
var cls = $(this).find('option:selected').text().toLowerCase();
$('#pricediv' + parseInt(ind) ).removeAttr('class').addClass(cls)
})
.change();
and
$('select[id^="optn"]').change(function(){
var ind = $(this).attr('id').replace('optn', '')
$('#pricediv' + parseInt(ind) ).removeClass('saver express expressplus').addClass(
$(this).find('option:selected').text().toLowerCase()
)
})
.change();
Would anyone be able to offer any guidance as to which one is best and therefore which one I should use as I am new to jQuery and I am trying to understand what does what.
try this:
http://jsfiddle.net/63MQu/10/