option select onchange

Question

This might be a primitive question, but I am new to JS/jQuery.

I have several different select boxes on a page. Each of them has an image next to, that is changed, when a different option is selected. However, this only works fine for one select box with getElementById, but it doesn't work with getElementByClassName for many of them, nor do I want to use this method, since I read it's not supported by IE8.0. Is there a way to make this work for multiple select boxes within one page, without using separate IDs for each one of them?

Your help would be greatly appreciated. Here's my code.

<img id="color" src="content/1.png"> 
<select class="mod_select" name="colors" id="changingColor" tabindex="1" onchange="changeimg()">
<option value="content/1.png">1 thing</option>
<option value="content/2.png">2 thing</option>
<option value="content/3.png">3 thing</option>
</select>

<script type="text/javascript">
function changeimg(){
document.getElementById('color').src=document.getElementById('changingColor').value
}
</script>

Edit: I'd like to use classes both for select and for img. Then within one div have a particular select option change the img next to it. Is that possible?

Edit 2: This works great:

$('.mod_select').on('change', function () {
     var $this = $(this);
     var img = $this.prev(); // assuming select is next to img
     img.attr('src', $this.val());
 });

However, the img is not next to select, I think I should use prevSibling, but I'm not sure how. Reading jQuery API didn't help me much. I would really appreciate your help! Here's my html:

 <img src="content/1.png"> <!-- the image that needs to be updated with new select option -->
 <p>text</p>
 <div class="moreinfo info_icon left"></div> <!-- the div that triggers qTip -->
 <div class="moreinfo_text"> <!-- this is a hidden div this that is shown by qTip with -- text: $(this).next('.moreinfo_text') -->
      <img src="content/qtip_img.jpg">
      <p>qTip text</p> 
 </div> 
 <select class="mod_select" name="colors" tabindex="1">
      <option value="content/1.png">1 thing</option>
      <option value="content/2.png">2 thing</option>
      <option value="content/3.png">3 thing</option>
 </select>

Answer 1

See if this works for you please:

jQuery(document).ready(function($){

   $('.mod_select').change(function() {
    $('.mod_select option:selected').each(function() {
     $('#color').attr('src', $(this).val());
    });
   });

});    

You should add something like

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">/* <![CDATA[ */
!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery.js"><\/script>')
/* ]]> */</script>

to the to add jQuery.

Answer 2

Since jQuery provides a very powerful selector, you can use a class selector to achieve your goal like the following:

1. Remove onchange attribute from select.

2. Edit your javascript.

   $('.mod_select').on('change', function () {
       var $this = $(this);
       var img = $this.prev(); // assuming select is next to img
       img.attr('src', $this.val());
   });