从图像更改"<a href"参数

Question

我有以下选择字段：

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

我想即时更改图像中的aURL。

图像代码为：

<div class="container">
<a href="test.php">
<span class="image_wrap">
<img src="/image.png">
</span>
</a>
</div>

因此，当用户选择任何国家/地区时，hrefurl 必须附加国家/地区值，如下所示(例如选择"日本"(：

<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>