如何使用选择标记在div中更改图像？

Question

我实际上是在制作自己的电话输入菜单，并且我的代码结构如下所示：

<select>
    <option data-countryCode="IN" value="91">India</option>
    <option data-countryCode="US" value="1">US</option>
    <option data-countryCode="GB" value="44">UK</option>
</select>

如何通过选择<Select> tag的文本/值来修改下一部分中的图像源并通过实际的[[data-countryCodes以小写形式

更改图像URL中的{data-countryCode}

<div class="image">
  <img src="https://flagpedia.net/data/flags/h80/{data-countryCode}.webp" id="img-change">
</div>

Answer 1

您需要将change事件添加到select

function getFlag() {
  const url = document.getElementById('phoneSelect').selectedOptions[0].dataset.countrycode;
  const flagURL = `https://flagpedia.net/data/flags/h80/${url.toLowerCase()}.webp`
  document.getElementById('img-change').setAttribute('src', flagURL)

}

document.getElementById('phoneSelect').addEventListener('change', function(evt) {
  getFlag();
});

getFlag()

<select id='phoneSelect'>
  <option data-countryCode="IN" value="91">India</option>
  <option data-countryCode="US" value="1">US</option>
  <option data-countryCode="GB" value="44">UK</option>
</select>


<div class="image">
  <img src='' id="img-change">
</div>