HTML,jquery: displaying images corresponding to selection on drop down list

Question

I have a question similar to "jQuery onchange/onfocus select box to display an image?".

Instead of one drop down list, I want to incorporate two. I have:

<select name="maps1" id="maps1" class="inputbox" size="1">
<option value=""> - Select State - </option>
<option value="cal">California</option>
<option value="ore">Oregon</option>
<option value="was">Washington</option>
</select>

and

<select name="maps2" id="maps2" class="inputbox" size="1">
<option value=""> - Select Crime - </option>
<option value="total">Total Arrests</option>
<option value="burg">Burglaries</option>
<option value="dui">DUI</option>
<option value="murders">Murder</option>
</select>

I have 12 maps named

"total_cal.png"
"burg_cal.png"
"dui_cal.png"
"murders_cal.png"
"total_ore.png"
"burg_ore.png"
etc. etc.

does anyone know a function similar to

$(document).ready(function() {
    $("#image").change(function() {
        var src = $(this).val();

        $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
    });
});

that would help me get the right map in place? Thanks

Reigel Gallarde · Answer 1 · 2013-12-10T01:54:22.270

0

$(document).ready(function() {
    $('<img/>').hide().appendTo("#imagePreview");
    var m1 = $("#maps1");
    var m2 = $("#maps2");
    m1.add(m2).change(function() {
        $("#imagePreview").find("img").show().attr('src',m2.val() + '_' + m1.val() + '.png' );
    });
});

jsfiddle

edited Dec 10 '13 at 01:54

answered Dec 10 '13 at 01:42

Reigel Gallarde

64,198
21
121
139

hmm, it doesn't seem to work. I hate how it doesn't give you any error messages.. – Chang Dec 10 '13 at 01:46

score 0 · Answer 2 · answered Dec 10 '13 at 01:46

0

well if your're problem is that you can just use

var src = $('#maps2').val() + '_' + $('#maps1').val() + '.png'

bear in mind that you have to check that both of the value are not null and job done :D

answered Dec 10 '13 at 01:46

Aliceiw

420
5
19

Tushar Gupta - curioustushar · Answer 3 · 2013-12-10T01:51:57.393

fiddle Demo

html

<div id="imagePreview">
    <img src="" />
</div>

js

var ddl = $('select.inputbox'), //caching selectors 
    map1 = $('#maps1'),
    map2 = $('#maps2'),
    imgprev = $("#imagePreview");
imgprev.find('img').hide(); //hide image
ddl.change(function () {
    var len = ddl.filter(function () {
        return this.value !== '';
    }).length; //get length of selcted dropdown where value is not null
    if (len === 2) { //if both the values are selected than only change image
        imgprev.find('img').show().prop('src', map1.val() + '_' + map2.val() + '.png')
    }
});

.prop()

.val()

.filter()

score 0 · Accepted Answer · answered Dec 10 '13 at 01:55

First of all this function will not work because you should hook the change function to the select elements, not "imagePreview". I presume that "imagePreview" is a div element or a container element, if that's the case, use these two functions below:

$(function() {
    $("#maps1").change(displayImg);
    $("#maps2").change(displayImg);
}); 

function displayImg(){
    var state = $('#maps1').val();
    var crime = $('#maps2').val();

    if(state != '' && crime != ''){            
        $("#imagePreview").html("<img src='" + crime + "_" + state + ".png'/>");
    }
    else
        $("#imagePreview").html("");
}

Hope it helps

Leo

Milan and Friends · Answer 5 · 2013-12-10T02:26:49.710

0

Here's a FIDDLE

$(function() {
  $('#maps1, #maps2').change(function() {
    var src = $('#maps2').val() + '_' + $('#maps1').val();
    if($('#maps1').val() && $('#maps2').val() !== '') {
       $('#imagePreview').html('<img src="'+src+'.png">');
    }
  });
});

edited Dec 10 '13 at 02:26

answered Dec 10 '13 at 02:09

Milan and Friends

5,560
1
20
28

HTML,jquery: displaying images corresponding to selection on drop down list

5 Answers5