Javascript 一个用于组合框数组的事件函数，用于更改图像源

有人能帮我解决这个问题吗

我有一个有4个三元组的表单：2个组合框和1张图片

需要将图片源更改为第一个+第二个组合框组合，将组合框值更改为图片文件名.png 如何命名/标识所有组合框，以使onchange事件处理所有组合框？哪个函数可以处理所有这些问题

<form name="myform">

<select name="first" id="1" onchange="show();">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" id="1" onchange="show();">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Dog-White.png">
<br/>

<select name="first" id="2" onchange="show();">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" id="2" onchange="show();">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Cat-White.png">
<br/>

<select name="first" id="3" onchange="show();">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" id="3" onchange="show();">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Dog-Black.png">
<br/>

<select name="first" id="4" onchange="show();">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" id="4" onchange="show();">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Cat-Black.png">
<br/>

</form>

不能对多个元素使用相同的ID。 你应该避免使用 避免使用太多的事件列表器。 HTML代码：

<form class="myform">
<div>
<select name="first" class="imgsrcfirst">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" class="imgsrccolor">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Dog-White.png">
</div>

<div>
<select name="first" class="imgsrcfirst">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" class="imgsrccolor">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Cat-White.png">
</div>

<div>
<select name="first" class="imgsrcfirst">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" class="imgsrccolor">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Dog-Black.png">
</div>

<div>
<select name="first" class="imgsrcfirst">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>
<select name="color" class="imgsrccolor">
    <option value="white">White</option>
    <option value="black">Black</option>
</select>
<img src="Cat-Black.png">
</div>

</form>

---

ID必须是唯一的，并且不应以数字开头。这是无效的HTML。注意：ID必须是唯一的，因为此事件委派非常有用。您可以为表单分配一个更改事件侦听器，并检查其中哪个选项等于e.target以及它的.value是什么，然后相应地更改图片。

 $('.myform .imgsrcfirst').change(function(){
           var $p = $(this).parent();
           $p.find('img').prop('src',$(this).val()+$p.find('.imgsrccolor').val()+'.png');

    });
 $('.myform .imgsrccolor').change(function(){
           var $p = $(this).parent();
           $p.find('img').prop('src',$p.find('.imgsrcfirst').val()+$(this).val()+'.png');

    });