Как изменить изображение в div с тегом select?

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
и изменение {data-countryCode} в URL изображения на фактические 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

Вы можете привязать обработчик события изменения к тегу выбора и изменить 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.
Добавить список событий при изменении вашего выбора, а затем установить sr c изображения в соответствии с выбранным параметром.

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 изображения, которое изначально было пустым. На 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>

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`);

});