Change Image Based on Dropdown Using JavaScript

Change image based on dropdown using javascript.

Here try this FIDDLE

<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
    <option value="1" selected>Picute 1</option>
    <option value="2">Picute 2</option>
    <option value="3">Picute 3</option>
    <option value="4">Picute 4</option>
    <option value="5">Picute 5</option>
</select>

---

var pictureList = [
    "http://lorempixel.com/400/200/sports/1",
    "http://lorempixel.com/400/200/sports/2",
    "http://lorempixel.com/400/200/sports/3",
    "http://lorempixel.com/400/200/sports/4",
    "http://lorempixel.com/400/200/sports/5", ];

$('#picDD').change(function () {
    var val = parseInt($('#picDD').val());
    $('img').attr("src",pictureList[val]);
});

change image based on dropdown vanilla js

I think the issue is in the way your accessing a property within the swap array

Try

logo.src = swap[dropdown.selectedIndex - 1];

The dropdown will have a selectedIndex value, it's 0 based like arrays, but because the first value is "please select" we need to minus one from the selectedIndex to correctly align it with the array of images.

Display Image Based on 2 Dropdown Values

The variable you stored the image filename is different from the variable you passed as the value in for the image's src tag

$('select.form-control').change(function() {
   var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
   $('#imgToChange').attr('src', filename);
});

You can also try using the .attr() method in place of the .prop() method like i did

Updated See code below
HTML

<select id="select-1">
    <option value="brown-head">Brown Head</option>
    <option value="black-head">Black Head</option>
    <option value="blue-head">Blue Head</option>
</select>
<select id="select-2">
    <option value="brown-body">Brown Body</option>
    <option value="black-body">Black Body</option>
    <option value="blue-body">Blue Body</option>
</select>
<img id="imgElem" src="" alt="">

JS

var imageSrc;
var imgFolder = "/path/to/image/folder/"; // specify the path to the folder containing the imgs in this variable

$("select").change(function(){
    imageSrc = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
    $("#imgElem").attr("src", imageSrc);
    $("p").text(imageSrc);
});

UPDATED ONCE AGAIN

This update creates the img tag each time an option is selected, replacing the previous img tag. This is to prevent the img src(undefined) error on page load.

To archive this, i added a div in the html to hold the img element, and simply change the divs html content.

HTML UPDATED

<select id="select-1">
    <option value="brown-head">Brown Head</option>
    <option value="black-head">Black Head</option>
    <option value="blue-head">Blue Head</option>
</select>
<select id="select-2">
    <option value="brown-body">Brown Body</option>
    <option value="black-body">Black Body</option>
    <option value="blue-body">Blue Body</option>
</select>

<p></p> <!--  just for debugging -->
<div class="img-wrap"></div> <!-- a div to hold the image -->

JS UPDATED

// specify the path to the folder containing the imgs in this variable
var imgFolder = "/path/to/image/folder/"; 

$("select").change(function(){
    var src; // variable to hold the src
    
    src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
    // append src to a p element just for debugging sake(i.e to see the change in the src)
    $("p").text(src);
    
    // create an img element with the src each time and append to the image wrap div
    $(".img-wrap").html(`<img src="${src}">`);
});

UPDATED ONCE AGAIN

To make it show the image with the default selected options both on page load and on option select, i tweaked the code again

NEW JS CODE

function getImageSrc(){
    // specify the path to the folder containing the imgs in this variable
    var imgFolder = "/path/to/image/folder/"; 

    // loop through each select element
    $("select").each(function(){
        // fire function to get src
        getSrc();
        
        // fire function to get src on change
        $(this).change(function(){
            getSrc();
        })
    });
    
    function getSrc(){
        var src; // variable to hold the src

        src = imgFolder + $("#select-1").val() + "-" + $("#select-2").val() + ".jpg";
        $("#imgElem").attr("src", src);
        // append src to a p element just for debugging sake(i.e to see the change in the src)
        $("p").text(src);

        // create a an img element with the src each time and append to the image wrap div
        $(".img-wrap").html(`<img src="${src}">`);
    }
}

// fire function on page-load
$(document).ready(function(){
    getImageSrc();
})

Changing image based on selection in 2 dropdowns

You need to write a function which is called on the change event of both select elements which concatenates the image filename and updates the src property of the required img, something like this:

$('select.form-control').change(function() {
    var filename = $('#shape').val() + '-' + $('#waist').val() + '.jpg';
    $('#imgToChange').prop('src', filename);
});

Jquery: dynamically change an img src based on dropdown selected value

You can use $(this).find('option:selected').data('img') to get the selected option data-attribute.

Demo Code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectLogo" onchange="document.getElementById('logo').src='/images/'+$(this).find('option:selected').data('img')" >
   <option value="1" data-img="img1.png">Image 1</option>
   <option value="2" data-img="img2.png">Image 2</option>
   <option value="3" data-img="img3.png">Image 3</option>
</select>

<img id="logo" src="">

---

Related Topics