javascript - display a particular <div> depending on the value in <select> tag -

i building ecommerce site, in payment methods write

<select name="pay_method">   <option value="0" selected="selected">select 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> 

now when person selects credit card, div credit cards displayed make payment.

before else: consider using jqueryui accordion - want, , requires less effort.

if want manually, track jquery event change() , use method val() selected value - suggested in other answers.

see this fiddle.

html:

<select id="pay_method" name="pay_method">   <option value="0" selected="selected">select 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">   selected <strong>cash</strong> payment method.  </div> <div id="credit_card_payment" class="payment_method">   selected <strong>credit card</strong> payment method.  </div> <div id="debit_card_payment" class="payment_method">   selected <strong>debit card</strong> payment method.  </div> <div id="netbanking_payment" class="payment_method">   selected <strong>netbanking</strong> payment method.  </div> 

js:

$("#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;   } });