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

how to set link in dropdown value using onchange event in html

本文关键字：设置 链接 事件 onchange html      更新时间：2023-09-26

下面是如何使用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>

修改代码，替换图像的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>

Test1: 

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

Test2: 

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