javascript - option select onchange -

javascript - option select onchange -

this might primitive question, new js/jquery.

i have several different select boxes on page. each of them has image next to, changed, when different alternative selected. however, works fine 1 select box getelementbyid, doesn't work getelementbyclassname many of them, nor want utilize method, since read it's not supported ie8.0. there way create work multiple select boxes within 1 page, without using separate ids each 1 of them?

your help appreciated. here's 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 utilize classes both select , img. within 1 div have particular select alternative alter img next it. possible?

edit 2: works great:

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

however, img not next select, think should utilize prevsibling, i'm not sure how. reading jquery api didn't help me much. appreciate help! here's html:

<img src="content/1.png"> <!-- image needs updated new select alternative --> <p>text</p> <div class="moreinfo info_icon left"></div> <!-- div triggers qtip --> <div class="moreinfo_text"> <!-- hidden div shown qtip -- 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>

see if works please:

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

you should add together

<!-- grab google cdn's jquery. fall 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 together jquery.

javascript jquery