选项选择onchange

Question

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

我在页面上有几个不同的选择框。当选择不同的选项时，它们中的每一个都在旁边有一个图像，该图像被更改。然而，这只适用于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> 

编辑：我想使用选择和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。

Answer 2

因为jQuery提供了一个非常强大的选择，你可以使用一个类选择，以实现自己的目标如下所示：

1. 删除onchange从选择属性。

2. 编辑您的JavaScript。

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

Answer 3

由于IE 8不支持getElementsByClassName您可以使用Internet Explorer中不支持的getElementsByTagName创建你自己的版本。一旦你有了元素数组，你可以迭代它们并为change事件分配一个事件处理程序，而不必与html内联。完成此操作后，您只需使用previousSibling或nextSibling的类名查找图像元素并更改其来源。

这里是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; 
} 

这里是一个fiddle的链接显示有关信息。注意：这不需要任何jQuery的:)

编辑

jQuery不会所有繁重的工作适合你，你可以改变上面的代码简单地

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

这看起来在所有它的第一个图像的前兄弟元素，并改变其来源。您可以更改选择器以包含您在第一次编辑时要添加的类名。这是一个fiddle显示jQuery的代码。