How can a change on the select tag trigger changing the src of an img?

Question

Is it possible to put an image that changes based on your selected option in a select tag? I need to change the flag image inside select tag that matches with the selected country.

I need to add a flag as image to the selected country. I can't seem to add an image on select tag though..plus the image must change based on the selected country — Cray, Oct 10 '18 at 07:06
This page might help? https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list — Carol McKay, Oct 10 '18 at 07:08
Your fiddle made no sense, did you mean this: https://jsfiddle.net/Twisty/Lfxy1hj4/4/ — Twisty, Oct 10 '18 at 07:16
@CarolMcKay I cant find a solution there.. i need it on the select tag not in the options — Cray, Oct 10 '18 at 07:17
@Cray you cannot add a image in that way to `select` only to `option`. Also what flag image or details are you using and how are you selecting them. You're code is confusing and your post is lacking a complete example. — Twisty, Oct 10 '18 at 07:20

score 1 · Answer 1 · answered Oct 10 '18 at 15:33

1

A proof of concept is like this.

HTML

<select id="select" onchange="window.changeSrc(this);">
    <option value="https://www.funnyhoop.com/wp-content/uploads/2018/06/funny-animals-1-5.jpg">First</option>
    <option value="https://pbs.twimg.com/profile_images/821849411991044096/lQFa_Vly_400x400.jpg">Second</option>
</select>
<img src="" id="img"
</body>

Javascript

window.changeSrc = function(that) {
    document.getElementById("img").src = that.value;
}
window.changeSrc(document.getElementById('select'));

Fiddle: https://jsfiddle.net/2tsv3uLq/

Explanation

You need a select tag and an img tag. The change of the select tag will change the src of the img tag.

answered Oct 10 '18 at 15:33

Lajos Arpad

64,414
37
100
175

Thanks but can you place the image inside the select tag? in your fiddle, the image should be next to the "first" text button – Cray Oct 11 '18 at 04:01
@Cray no, you should put your select tag inside a div and you should work with the background-image CSS property of your wrapper div. Something along the lines of https://jsfiddle.net/2tsv3uLq/1/ – Lajos Arpad Oct 12 '18 at 15:41
@Cray don't worry about the image being repeated, you can nicely design this using CSS. – Lajos Arpad Oct 12 '18 at 15:41

score 0 · Answer 2 · answered Oct 11 '18 at 08:38

Ok you can do it like this.

Changes needed:

HTML

You need to wrap your select in a container like this and create a <img id="flag'> which will be the flag image. We will change the source in JS. You need this wrapper so that you can absolutely position the flag image based on the relative position of this container. The image will sit on top of the select tag which will have a padding-left so that some space is created for the image.

You also have to add a data-flag attribute on each option. This will hold a value which is the same as the name of the image. So if you have an image named Germany.jpg you must set the data-flag of the Germany option to data-flag="Germany".

  <select id="select" name="cd-dropdown" class="cd-select" onchange="myFunction()">
  <!-- <option value="-1" selected>Currency</option>   -->
  <option data-flag="Germany" value="1" select>Germany </option>
  <option data-flag="Spain" value="2">Spain</option>
  <option data-flag="Barcelona" value="3">Barcelona</option>
  <option data-flag="Sweden" value="4">Sweden</option>
  </select>
</div>

CSS

Set position relative on the wrapper and move the margin-bottom from the select to this wrapper. Set the flag to be vertically centered on the select with an absolute positioning. You can change the size or position of the flag based on your needs.

.select-wrapper {
  position: relative;
  margin-bottom: 1em;
}

#flag {
  width: auto;
  height: 20px;
  display: block;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

select {
  width: 13em;
  padding: .5em .

JS

The only new piece of code is where we set the source of the image for the #flag img. $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg"); This takes the text from the data-flag attribute of the selected option and adds it as a path for the image. In this case the image must be placed in the same directory as your JS file. YOU MUST CHANGE THIS ACCORDING TO YOUR FOLDER STRUCTURE!

Example:

$('#flag').attr("src", "../images" + $(this).find(':selected').attr('data-flag') + ".svg");

$(function firstFunction() {
  $('.pr-price').hide();
  $('.d2').show();
  $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg");

  $('#select').on("change", function () {
    $('.pr-price').hide();
        $('.d' + $(this).val()).show();
        $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg");
  }).val("1");
});
function myFunction() {
  var language = document.getElementById("select").value;
  sessionStorage.setItem("marketcode", language);
}

Final code snippet is here (i changed the CSS a bit as some of your SASS referenced some variables that were not defined in your style)

Ignore the snippet errors, they pop up beacause the source files are not available.

$(function firstFunction() {
  $('.pr-price').hide();
 $('.d2').show();
 $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg");

  $('#select').on("change", function () {
    $('.pr-price').hide();
  $('.d' + $(this).val()).show();
  $('#flag').attr("src", $(this).find(':selected').attr('data-flag') + ".svg");
  }).val("1");
});

function myFunction() {
  var language = document.getElementById("select").value;
  sessionStorage.setItem("marketcode", language);
}

#global-en {
  padding-left: .5em;
}

#contact {
  float: right;
  padding-right: .5em;
  border-right: 1px solid #333;
  color: white;
}

.dropdown-toggle {
  color: #fff;
}

.px-4.py-3 {
  width: 15em;
}

.dropdown-heading {
  font-weight: 700;
  margin-bottom: .1em;
}

.inner-language-heading {
  font-weight: 700;
}

.btn-light {
  background-color: white;
  margin-bottom: 1.5em;
  width: 12em;
}

.btn-red {
  background-color: red;
}

.select-wrapper {
  position: relative;
  margin-bottom: 1em;
}

#flag {
  width: auto;
  height: 20px;
  display: block;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}

select {
  width: 13em;
  padding: .5em .5em .5em 3em;
}

a {
  color: #333;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
}

.dropdown-menu {
  width: 17em;
}

.save-changes {
  text-align: center;
  margin-left: 1em;
}

#dropdownMenu3 {
  margin-bottom: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

        <div class="dropdown" id="global-en">
            <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false" style="color: black;">
                Global -EN
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" id="global-en">

                <!-- DROPDOWN START -->
                <form class="px-4 py-3">

                    <!-- COUNTRY   -->
                    <p>Country</p>
                    <!-- INNER DROPDOWN -->

                    <div class="select-wrapper">
                        <img id="flag" />
                        <select id="select" name="cd-dropdown" class="cd-select" onchange="myFunction()">
                            <!-- <option value="-1" selected>Currency</option>   -->
                            <option data-flag="Germany" value="1" select>Germany </option>
                            <option data-flag="Spain" value="2">Spain</option>
                            <option data-flag="Barcelona" value="3">Barcelona</option>
                            <option data-flag="Sweden" value="4">Sweden</option>
                        </select>
                    </div>


                    <!-- LANGUAGE -->
                    <p>Language</p>
                    <div class="pr-price d1">
                        <div class="row">
                            <div class=".col-4 col-lg-4">
                                <p>Deutsch</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>English</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>Francoise</p>
                            </div>
                        </div>
                    </div>

                    <div class="pr-price d2">
                        <div class="row">
                            <div class=".col-4 col-lg-4">
                                <p>Spanish</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>English</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>Francoise</p>
                            </div>
                        </div>
                    </div>

                    <div class="pr-price d3">
                        <div class="row">
                            <div class=".col-4 col-lg-4">
                                <p>Mandarin</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>English</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>Francoise</p>
                            </div>
                        </div>
                    </div>

                    <div class="pr-price d4">
                        <div class="row">
                            <div class=".col-4 col-lg-4">
                                <p>Japanese</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>English</p>
                            </div>
                            <div class=".col-4 col-lg-4">
                                <p>Francoise</p>
                            </div>
                        </div>
                    </div>

                    <!-- CURRENCY START -->
                    <!-- <p>Currency</p>
                            <div class="dropdown">     
                                <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  Euro
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                  <button class="dropdown-item" type="button">Action</button>
                                  <button class="dropdown-item" type="button">Another action</button>
                                  <button class="dropdown-item" type="button">Something else here</button>
                                </div>
                            </div> -->
                    <!-- CURRENCY END -->

                    <button class="btn-red">Save changes</button>

                </form>
                <!-- DROPDOWN END -->
            </div>
        </div>
        <a id="contact" href="#">contact us</a>
    </div>

How can a change on the select tag trigger changing the src of an img?

2 Answers2

HTML

Javascript

Explanation