Use jQuery to change css of text with select option - how to combine multiple functions
<p>This is my first time using jQuery and I am pleased to get my first attempt working.
With the help of <a href="http://stackoverflow.com/questions/9024516/div-css-change-when-select-option-is-selected-with-jquery">this post</a> 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.</p>

<p>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.</p>

<p>The id of each dropdown increments like this - optn0x0, optn1x0 etc</p>

<p>and the div id of the price increments like this pricediv0, pricediv1 etc</p>

<p>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.</p>

<p>Here is the code</p>

<pre><code>&lt;style&gt;
.saver{color:red;}
.express{color:black;}
.expressplus{color:blue;}
&lt;/style&gt;

&lt;html&gt;

&lt;select class="prodoption" name="optn0" id="optn0x0"&gt;&lt;option value="68"&gt;Saver&lt;/option&gt;
&lt;option value="69" selected="selected"&gt;Express&lt;/option&gt;
&lt;option value="70"&gt;ExpressPlus&lt;/option&gt;
&lt;/select&gt;

&lt;td class="cobll cpdll"&gt;&lt;div class="prod3price"&gt;&lt;span class="price" id="pricediv0"&gt;74.00&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;

&lt;select class="prodoption" name="optn0" id="optn1x0"&gt;&lt;option value="68"&gt;Saver&lt;/option&gt;
&lt;option value="69" selected="selected"&gt;Express&lt;/option&gt;
&lt;option value="70"&gt;ExpressPlus&lt;/option&gt;
&lt;/select&gt;

&lt;td class="cobll cpdll"&gt;&lt;div class="prod3price"&gt;&lt;span class="price" id="pricediv1"&gt;74.00&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
&lt;/html&gt;
</code></pre>

<p>and here is the jQuery</p>

<pre><code>$('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();
</code></pre>

<p>Any suggestions would be most appreciated.</p>

<hr>

<p>Hi,</p>

<p>Thank you all for your answers on this</p>

<p>I now have two working solutions:</p>

<pre><code>$('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();
</code></pre>

<p>and</p>

<pre><code>$('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();
</code></pre>

<p>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.</p>
