Changing image based on selection in 2 dropdowns

Question

I have two select elements:

<select class="form-control" id="shape" name="shape">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
  <option value="e">e</option>
  <option value="f">f</option>
</select>

The second one shows the sub categories of the first:

<select class="form-control" id="waist" name="waist">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

These are part of a form that is used for other operations and names and values of these can be changed.

In my database I have images of a-1, a-2, a-3, b-1, b-2, b-3, c-1, c-2, c-3 and so on. I have a space for images which should be updated once options have been chosen from both select elements.

I have read many forms but they used only one dropdown. I am bit new in javascript so can anybody help with this? You can use PHP if you want.

Can you show what you already have in jsfiddle? – Nique Joe Jun 12 '16 at 14:22 — Nique Joe, Jun 12 '16 at 14:22

score 2 · Accepted Answer · edited Nov 14 '20 at 04:31

2

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

edited Nov 14 '20 at 04:31

s.kuznetsov

14,870
3
10
25

answered Jun 12 '16 at 14:27

Rory McCrossan

331,213
40
305
339

1

Thank for solution but sorry that i dont enough reputation to upvote.but thanks – My Shots Jun 12 '16 at 15:54

score 0 · Answer 2 · answered Jun 12 '16 at 14:22

0

You can use this to get the combined value of dropdowns in the format like a-2,a-3,b-1 etc.

document.getElementById("shape").value + "-" + document.getElementById("waist").value

answered Jun 12 '16 at 14:22

Neelesh

666
6
17

score 0 · Answer 3 · edited May 23 '17 at 12:08

You can use a solution with jQuery (javascript) / PHP / AJAX (and don't worry, AJAX is easy). It will work like this:

jQuery - detect when both SELECT controls have been changed,
AJAX - a jQuery block that sends data to a back-end PHP file,
PHP - Receives AJAXed data and identifies the correct image (e.g. from MySQL) then builds HTML code and ECHOs it back to jQuery side,
AJAX - Receives PHP data via AJAX,
jQuery - Inside the AJAX success function, uses the ,html() method to insert the new HTML into the DOM

That's the overview. Here's how it will look code-wise:

HTML:

<select class="form-control" id="shape" name="shape">
  <option value="">Options go here</option>
</select>

<select class="form-control" id="waist" name="waist">
  <option value="">Options go here</option>
</select>

<div id="someDIV"> //DIV that will receive IMG tag </div>

jQuery:

var chg = false;
$('#shape, #waist').change(function(){
    if (!chg){
        chg=true;
    }else{
        var myimg = $('#shape').val() + $('#waist').val();
        $.ajax({
            type: 'post',
             url: 'my_second_php_file.php',
            data: 'myimg=' +myimg,
            success: function(d){
                //if (d.length) alert(d);
                $('#someDIV').html(d);
            }
        }); //END AJAX
    }//end else
}); //END select.change

PHP:

<?php
    $img = $_POST['myimg'];
    //echo ($img); die();

    //$result = Do your MySQL lookup here

    $out = '
        <img src="' .$result['img']. '" class="yourImage" />
    ';
    echo $out;
?>

Here is a jsFiddle DEMO that approximates how it will work. jsFiddle cannot do AJAX, so the AJAX routine is replaced by something that will demonstrate how it will look, rather than a true working example.

Here are some simple demos of AJAX code and a brief explanation -- copy them to your own system and experiment. Really quite simple, and xtreme useful.

Here are some free, 10-min video mini-tuts on AJAX.

Where does the OP mention anything regarding AJAX? I think you may be over-complicating this one — Rory McCrossan, Jun 12 '16 at 14:28
No offense taken, it's tricky to balance a short comment with being courteous. That said I don't think any AJAX is needed here. Assuming the OP doesn't require any validation, the `img` element can be built directly in JS code using the values of the existing `select` elements. We need more detail from the OP in either case. — Rory McCrossan, Jun 12 '16 at 15:31
Thank you for your understanding response. OP does mention `in my database`, which is what triggered AJAX solution in my mind. — cssyphus, Jun 12 '16 at 15:47
i agree this solution is nice but i will be having no idea what i am doing,but definitely this gives us more freedom:) — My Shots, Jun 12 '16 at 16:29

score 0 · Answer 4 · answered Jun 12 '16 at 14:41

you can use the below plunker as well.

https://plnkr.co/edit/1P12J0Ahl2S1m6aJ1rD0?p=preview

<select class="form-control" id="shape" name="shape">  
 <option value=""></option>
       <option value="a">a</option>
   <option value="b">b</option>
   <option value="c">c</option>
   <option value="d">d</option>
   <option value="e">e</option>
       <option value="f">f</option>

</select>


<select class="form-control" id="waist" name="waist">  
<option value=""></option>
 <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<button onClick="test()">Proceed</button>

in script.

var test = function(){
if($("#shape").val() != "" && $("#waist").val() != "")
{
   alert("Update");
}
else
{
   alert("select both the option");
}
};

here each select box has the default blank option and if user try to proceed then the value is checked and appropriate message is displayed.

Changing image based on selection in 2 dropdowns

4 Answers4

Linked