如何使用 select 标签更改 div 中的图像？

Question

我实际上制作了自己的电话输入菜单，我的代码结构如下所示：<select id-"select_code">    <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代码 更改图像 url 来修改下一节中的图像源{data-countryCode}<div class="image">  <img id="flag_img" src="https://flagpedia.net/data/flags/h80/{data-countryCode}.webp" id="img-change"></div>    <script>      var select = document.getElementById("select_code")      select.addEventListner("click", function changeImage(){          document.getElementById("flag-img").src = `https://flagpedia.net/data/flags/h80/ + {what to do here?} + .webp`}    </script>

Answer 1

您可以将更改事件处理程序绑定到选择标记并src根据更改进行更改。

const img = document.querySelector('#img-change');

const select = document.querySelector('#country');

select.addEventListener('change', function() {

  img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`

})

<select id="country">

  <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="https://flagpedia.net/data/flags/h80/in.webp" id="img-change">

</div>

Answer 2

您可以使用 JavaScript 来完成此操作。

在更改时添加事件侦听器到您的选择，然后根据所选选项设置图像的 src。

const selection = document.querySelector('#countryCodeSelection');

const image = document.querySelector('#img-change')

selection.onchange = (ev) => {

  const index = selection.selectedIndex;

  const countryCode = selection.options[index].dataset.countrycode.toLowerCase();

  image.src = `https://flagpedia.net/data/flags/h80/${countryCode}.webp`

};

<select id="countryCodeSelection">

  <option disabled selected value>select country</option>

  <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 id="img-change">

</div>

Answer 3

您需要将change事件添加到select. getFlag 将创建标志 url 并将其设置为src最初为空的图像的 url。再次调用change此函数以从所选选项中getFlag获取属性。注意常量中data的使用template literalflagURL

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>

Answer 4

你可以使用这个代码

你的 HTML

<select id="chooseCountry">

    <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" id="imageRelativeCountry">

    <img src="https://flagpedia.net/data/flags/h80/in.webp" id="img-change">

</div>

js代码

const chooseCountrySelect =  document.getElementById("chooseCountry");

chooseCountrySelect.addEventListener("change",function (e) {

    let language = e.target.options[e.target.selectedIndex].getAttribute("data-countryCode");

    const imgElm = document.querySelector("#imageRelativeCountry img");

    language = language.toLowerCase();

    imgElm.setAttribute("src",`https://flagpedia.net/data/flags/h80/${language}.webp`);

});