如何使用选择标签更改 div 中的图像？答案

【问题标题】：How to change image in a div with select tag?如何使用选择标签更改 div 中的图像？
【发布时间】：2020-07-10 01:56:02
【问题描述】：

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

<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的文本/值来修改以下部分中的图像源
并用小写的实际 data-countryCodes 更改图片网址中的 {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>

【问题讨论】：

使用更改事件处理程序
你试过什么？你遇到了什么问题？您可以分享您的代码，将其添加到您的问题中吗？（考虑到问题中的标签，我认为这是 JavaScript）。
嗨，我已经做了一些修改以澄清。希望对您有所帮助...

标签： javascript html image select src

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

您可以将更改事件处理程序绑定到选择标签，并根据更改更改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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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`);

});

【讨论】：