更改“

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>