javascript - 选项选择onchange

Question

这可能是一个原始问题，但我是 JS/jQuery 的新手。

我在一个页面上有几个不同的选择框。 Each of them has an image next to, that is changed, when a different option is selected.然而，这只适用于一个带有 getElementById 的选择框，但它不适用于其中许多选择框的 getElementByClassName，我也不想使用这种方法，因为我读到它不受 IE8.0 支持。有没有一种方法可以使此功能适用于一个页面中的多个选择框，而无需为每个选择框使用单独的 ID？

非常感谢您的帮助。这是我的代码。

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

编辑:我想对 select 和 img 使用类。然后在一个 div 中有一个特定的选择选项更改它旁边的 img。这可能吗？

编辑 2:效果很好:

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

但是，img 不在选择旁边，我想我应该使用 prevSibling，但我不确定如何使用。阅读 jQuery API 对我帮助不大。我将衷心感谢您的帮助!这是我的 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

请看看这是否适合你:

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

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

});    

你应该添加类似的东西

<!-- 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>

添加 jQuery。