如何更改带有 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
的 Text/value 来修改下一节中的图像源并将图像 url 中的 {data-countryCode} 更改为小写 data-countryCodes

<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

您需要向 select 添加一个 change 事件。 getFlag 将创建标志 url 并将其设置为最初为空的图像的 src。在 change 上再次调用此 getFlag 以从所选选项中获取 data 属性。注意在 flagURL 常量

中使用 template literal

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 2

您可以将更改事件处理程序绑定到 select 标记并根据更改更改 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 3

您可以使用 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 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`);

});

如何更改带有 select 标签的 div 中的图像？

How to change image in a div with select tag?

html

javascript

select

image

src