CODEWITHSUNDEEP
javascripthtml
Cray
Cray

Reputation: 87

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

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.

Upvotes: 0

Views: 617

Answers (2)

Cata John
Cata John

Reputation: 1401

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>

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76551

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.

Upvotes: 1

Related Questions