CODEWITHSUNDEEP
javascripthtmlimageselectsrc
Rahul Ahire
Rahul Ahire

Reputation: 825

How to change image in a div with select tag?

Im actually making my own telephone input menu and my code structure looks something like below:

<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>

How do I the modify image source in following section by selecting a Text/value of <Select> tag
and changing {data-countryCode} in image url by actual data-countryCodes in lowercase

<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>

Upvotes: 1

Views: 1884

Answers (4)

Danial Rahimy
Danial Rahimy

Reputation: 25

you can use this code

your 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 code

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

});

Upvotes: 0

Fabian
Fabian

Reputation: 21

You can do this with JavaScript.
Add a eventlistener on change to your selection and then set the src of the image according to the selected option.

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>

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115212

You can bind change event handler to the select tag and change src according to the change.

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>

Upvotes: 1

brk
brk

Reputation: 50291

You need to add a change event to the select. getFlag will create the flag url and will set it to the src of the image which was initially empty. On change this getFlag is again called to get the data attribute from the selected option. NOte the use of template literal in flagURL constant

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>

Upvotes: 1

Related Questions