Display Image Based on 2 Dropdown Values

Question

I am hoping that you can help me out. I need to change an image based on the selection of 2 dropdown values. I have a number of image variations to show any option. I have a selection of code that I know concernates the file name of the image, but I can't seem to find a way to actually display that image. I have taken the code from a previous answer, but I can't get it to work for me - Changing image based on selection in 2 dropdowns.

Here is the code that I am using:

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

<select class="form-control" id="shape" name="shape">
  <option value="a">Select a country</option>
  <option value="b">Canada</option>
  <option value="c">U.S.A.</option>
</select><br>
<select class="form-control" id="waist" name="waist">
  <option value="1">Select a country</option>
  <option value="2">Canada</option>
  <option value="3">U.S.A.</option>
  <option value="4">India</option>
</select><br>
<img id="imgToChange">

Where am I going wrong on this one?

Thanks in advance!

Answer 1

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();
})

Answer 2

Your variable name should be filename not just file because that's what you're using in your code. Here's what you need.

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

UPDATE

If you're pulling your images from a folder img then you need to do this:

$('#imgToChange').prop('src', 'img/'+filename);