Have Geek Brain

How to display an image when a select option is selected using jquery, css

How to show the image when 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 choose paypal on the div id="payment"

, the PayPal logo will be displayed and if the bank will show the bank logo.

Can I do it with jquery? let me know.

+2


a source to share


3 answers


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

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


This approach adjusts src

images based on the currently selected value. Additionally, we fire the event once per document.ready

so that the initial hide / show state matches the dropdown.

+1


a source


Assumption: Your bank logo is named bank.gif.

EDIT: Added code to check for empty value.



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

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

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


a source


You will need to hide 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 selection.

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

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


a source






More articles:


All Articles