更改“

Question

我有以下选择字段：

<select name="country" class="country">
<option value="0">Select Country</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>

我想即时更改图片中的网址。

图像代码为：

<div class="container">

<a href="test.php">

<span class="image_wrap">
<img src="/image.png">
</span>
</a>
</div>

因此，当用户选择任何国家/地区时， href url必须附加国家/地区值（例如，选择“ Japan”）：

<a href="test.php?country=japan">

怎么做？

Answer 1

只需添加一个事件监听器

 const select = document.querySelector('select[name="country"]'); const a = document.querySelector('.container > a'); select.addEventListener('change', () => { a.href = 'test.php?country=' + select.value; }); 

 <select name="country" class="country"> <option value="0">Select Country</option> <option value="usa">USA</option> <option value="japan">Japan</option> </select> <div class="container"> <a href="test.php"> <span class="image_wrap"> <img src="http://test.com/image.png"> </span> </a> </div>