如何在HTML中使用onchange事件设置下拉值中的链接

Question

在这里，如何使用html中的OnChange事件在下拉值中设置不同的锚标记。

 <form method="post">
 <select onchange="$('#imageToSwap').attr('src',this.options[this.selectedIndex].value);">
  <option value="http://dummy.com/images/button1.png" selected>Test1</option>
 <option value="http://dummy.com/images/button2.png">Test2</option>
 </select> 
 </form>


 Test1:
 <a href="https://link1.com"><img id="imageToSwap" class="class1" src="http://dummy.com/images/button1.png"></a>

 Test2:
<a href="https://link2.com"><img id="imageToSwap" class="class1" src="http://dummy.com/images/button2.png"></a>

Answer 1

通过替换image的ID修改了代码：

<form method="post">
 <select onchange="$('#imageToSwap').attr('src',this.options[this.selectedIndex].value);">
  <option value="http://dummy.com/images/button1.png" selected>Test1</option>
 <option value="http://dummy.com/images/button2.png">Test2</option>

测试1：

 <a href="https://link1.com"><img id="imageToSwap1" class="class1" src="http://dummy.com/images/button1.png"></a>

测试2：

<a href="https://link2.com"><img id="imageToSwap2" class="class1" src="http://dummy.com/images/button2.png"></a>