如何使用 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() {&nbsp; img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`})<select id="country">&nbsp; <option data-countryCode="IN" value="91">India</option>&nbsp; <option data-countryCode="US" value="1">US</option>&nbsp; <option data-countryCode="GB" value="44">UK</option></select><div class="image">&nbsp; <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) => {&nbsp; const index = selection.selectedIndex;&nbsp; const countryCode = selection.options[index].dataset.countrycode.toLowerCase();&nbsp; image.src = `https://flagpedia.net/data/flags/h80/${countryCode}.webp`};<select id="countryCodeSelection">&nbsp; <option disabled selected value>select country</option>&nbsp; <option data-countryCode="IN" value="91">India</option>&nbsp; <option data-countryCode="US" value="1">US</option>&nbsp; <option data-countryCode="GB" value="44">UK</option></select><div class="image">&nbsp; <img id="img-change"></div>

Answer 3

您需要将change事件添加到select. getFlag 将创建标志 url 并将其设置为src最初为空的图像的 url。再次调用change此函数以从所选选项中getFlag获取属性。注意常量中data的使用template literalflagURLfunction getFlag() {&nbsp; const url = document.getElementById('phoneSelect').selectedOptions[0].dataset.countrycode;&nbsp; const flagURL = `https://flagpedia.net/data/flags/h80/${url.toLowerCase()}.webp`&nbsp; document.getElementById('img-change').setAttribute('src', flagURL)}document.getElementById('phoneSelect').addEventListener('change', function(evt) {&nbsp; getFlag();});getFlag()<select id='phoneSelect'>&nbsp; <option data-countryCode="IN" value="91">India</option>&nbsp; <option data-countryCode="US" value="1">US</option>&nbsp; <option data-countryCode="GB" value="44">UK</option></select><div class="image">&nbsp; <img src='' id="img-change"></div>

Answer 4

你可以使用这个代码你的 HTML<select id="chooseCountry">&nbsp; &nbsp; <option data-countryCode="IN" value="91">India</option>&nbsp; &nbsp; <option data-countryCode="US" value="1">US</option>&nbsp; &nbsp; <option data-countryCode="GB" value="44">UK</option></select><div class="image" id="imageRelativeCountry">&nbsp; &nbsp; <img src="https://flagpedia.net/data/flags/h80/in.webp" id="img-change"></div>js代码const chooseCountrySelect =&nbsp; document.getElementById("chooseCountry");chooseCountrySelect.addEventListener("change",function (e) {&nbsp; &nbsp; let language = e.target.options[e.target.selectedIndex].getAttribute("data-countryCode");&nbsp; &nbsp; const imgElm = document.querySelector("#imageRelativeCountry img");&nbsp; &nbsp; language = language.toLowerCase();&nbsp; &nbsp; imgElm.setAttribute("src",`https://flagpedia.net/data/flags/h80/${language}.webp`);});