Select onchange option
This might be a primitive question, but I'm new to JS / jQuery.
I have several different select boxes on a page. They each have an image next to it, which changes when a different option is selected. However, this only works for one select box with getElementById, but for many of them, it doesn't work with getElementByClassName, and I don't want to use this method as I read it but did not support IE8.0. Is there a way to make this work for multiple select boxes on the same page without using separate IDs for each one?
Your help would be greatly appreciated. Here is 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 would like to use classes for both select and img. Then, within one div, the specific img selection next to it will be selected. Is it 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, img is not a good choice, I think I should use prevSibling, but I'm not sure how. Reading the jQuery API didn't work for me. I would really appreciate your help! Here is 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>
source to share
See if this works for you:
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 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 add jQuery.
source to share
Since jQuery provides a very powerful selector, you can use a class selector to accomplish your goal, for example:
- Remove the attribute
onchange
from the list. -
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()); });
source to share
Since IE 8 does not support getElementsByClassName
, you can create your own version with the getElementsByTagName
one that Internet Explorer supports. Once you have an array of elements, you can iterate over them and assign an event handler to the event change
instead of doing it inline with html. Once this is done, all you have to do is find the image element by its class name using previousSibling
or nextSibling
and change its origin.
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 fiddle link showing this. Note: no jQuery is required for this :)
change
jQuery does all the heavy lifting for you and you can change the above code to just
$('.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 comes to and changes its source. You can change the selector to include the class name you mentioned that you want to add in your first edit. Here is a fiddle showing the code with jQuery.
source to share