Change visible <div> dependent on <select>ed <option> - slide

http://stackoverflow.com/q/15847671/2170192

by vovkss

HTML

<select id="pay_method" name="pay_method">
  <option value="0" selected="selected">Select a Payment Method</option>
  <option value="1">Cash on Delivery</option>
  <option value="2">Credit Card</option>
  <option value="3">Debit Card</option>
  <option value="4">Netbanking</option>
</select>

<div id="cash_payment" class="payment_method">
    You selected <strong>cash</strong> payment method. 
</div>
<div id="credit_card_payment" class="payment_method">
    You selected <strong>credit card</strong> payment method. 
</div>
<div id="debit_card_payment" class="payment_method">
    You selected <strong>debit card</strong> payment method. 
</div>
<div id="netbanking_payment" class="payment_method">
    You selected <strong>netbanking</strong> payment method. 
</div>

CSS

.payment_method
{
  padding: 10px; 
  display: none; 
}
#cash_payment
{
  background: lime;
}
#credit_card_payment
{
  background: pink;
}
#debit_card_payment
{
  background: aqua;
}
#netbanking_payment
{
  background: yellow;
}

JavaScript

$("#pay_method").change(function()
{
  $('.payment_method').slideUp();
  switch($('#pay_method :selected').val())
  {
    case '1': $('#cash_payment').slideDown(); break;
    case '2': $('#credit_card_payment').slideDown(); break;
    case '3': $('#debit_card_payment').slideDown(); break;
    case '4': $('#netbanking_payment').slideDown(); break;
  }
});