title: Use jQuery to change css of text with select option - how to combine multiple functions
body: <p>This is my first time using jQuery and I am pleased to get my first attempt working.
  With the help of <a href="https://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>