更改“<a href"="" parameter="" from="" image=""

Question

="" I have the follow select field:

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

and I would like to change on the fly the a url from an image.

Image code is:

<div class="container">

<a href="test.php">

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

So when user select any country the a href url must have appended the country value as the follow (for example selecting "Japan"):

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

How to do that?

Answer 1

只需添加一个事件监听器

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;