选项选择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>

编辑：我想使用select和for 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. 从select中删除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按类名查找image元素并更改其源。

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

这是一个显示这个的小提琴的链接。 注意：这不需要任何jQuery :)

编辑

jQuery为您完成所有繁重工作，您可以将上述代码更改为简单

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

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