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>

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>

• javascript
• jquery

• The id attribute on elements should be unique, so they should have separate IDs anyway. If you want to group multiple elements together then you should use a class. – Anthony Grist Commented Feb 5, 2013 at 16:27

3 Answers 3

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

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());
   });
   

Since IE 8 doesn't support getElementsByClassName you can create your own version of it using the getElementsByTagName that Internet Explorer does support. Once you have the array of elements you can iterate over them and assign an event handler for the change event instead of having to do it inline with the html. Once this is done, all you need to do is find the image element by its class name using previousSibling or nextSibling and change its source.

Here is the javascript

var select = getElementsByClassName(document.body,'mod_select');
for (var i = 0; i < select.length; i++){
    select[i].onchange = function() {
      var prevSibling = this.previousSibling;
      while(prevSibling && prevSibling.className != 'image') {
           prevSibling = prevSibling.previousSibling;
      }
      prevSibling.src = this.value;
    }
}

function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('(^| )'+classname+'( |$)');
    var els = node.getElementsByTagName('*');
    for(var i = 0, j = els.length; i < j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

Here is a link to a fiddle showing this. Note: this does not require any jQuery :)

edit

jQuery does all of the heavy lifting for you and you can change the above code to simply

$('.mod_select').change(function(){
    $(this).prevAll('img:first').attr('src', this.value); 
});

This looks among all the previous sibling elements for the first image it es to and changes its source. You can change the selector to include the class name you mentioned you wanted to add in your first edit. Here is a fiddle showing the code with jQuery.