How to display image when click the select option using jquery, css

Question

How to show an image while we select the option below.

Example : -

<select name="payment">
<option value="">Please Select</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank</option>
</select>

<div id="payment"><img src="paypal.gif" alt="paypal" /></div>

If we select paypal on div id="payment" will show the logo paypal and if bank will show bank logo.

Can be done with jquery? let me know.

Answer 1

You'll need to hide the paypal.gif first

<select name="payment">
<option value="Paypal">Paypal</option>
<option value="Bank">Bank</option>
</select>

<div id="payment"><img src="paypal.gif' alt="paypal' /></div>

Then bind a change handler to the select.

<script>
var images = { 
    'Paypal': 'paypal.gif', 
    'Bank': 'bankLogo.gif'
};

$("select").bind("change",function(){
    $("div#payment img:first").attr('src', images[$("select :selected").val()] );
});
</script>

Answer 2

Doh, misread the question, updated:
You can do this with just a small event handler, like this:

$(function() {
  $("select[name=payment]").bind("change", function() {
    $("#payment img").attr('src', $(this).val().toLowerCase() + ".gif");
  }).change();
});

This approach adjusts the src of the image based on the current selected value. Also, we're triggering the event one time on document.ready to make the initial hide/show state match the dropdown.

Answer 3

Assumption: your bank logo is called bank.gif.

EDIT: added code to check for blank value.

$('select[name=payment]').change(function() {

  var val = $(this).val();

  $('div#payment img')
    .attr('src', val + '.gif')
    .css('display', val.length ? 'block' : 'none');
});