javascript - show hidden div based on dropdown selection -
i have member registration form contains dropdown. events firstly enter membership details, select event , number of tickets wish purchase. options follows:
- member
- member + 1 guest
- member + 2 guests
- member + 3 guests, , on.
what want happen because "members" free attend, want keep payment div hidden unless select member + xxxx.
i complete novice when comes javascript/jquery can understand of when written.
i have jsfiddle (http://jsfiddle.net/beurh/) created basics need hand writing script. of code below:
<div id="tickets"> <label for="cat_custom_255276">number of tickets: <span class="req">*</span></label> <select class="cat_dropdown" id="cat_custom_255276" name="cat_custom_255276"> <option value=" ">-- please select --</option> <option value="member">member</option> <option value="member + 1 guest">member + 1 guest</option> <option value="member + 2 guests">member + 2 guests</option> <option value="member + 3 guest">member + 3 guests</option> </select> </div> <div id="paymethod"> <div class="header"> payment method </div> <div id="payoptions"> <div id="payinfo"> <div id="pay0" class="paymentinfo"> <p>payment info option 1</p> </div> <div id="pay1" class="paymentinfo"> <p>payment info option 2</p> </div> <div id="pay2" class="paymentinfo"> <p>payment info option 3</p> </div> </div> </div> </div>
if please assist, appreciated.
i'll value when select change detected , compare..
edit:
$("select").change(function () { var str = ""; str = parseint($(this).val()); $("#paymethod").toggle(str >= 2) });
in html, changed value integer...
<option value="0">-- please select --</option> <option value="1">member</option> <option value="2">member + 1 guest</option> <option value="3">member + 2 guests</option> <option value="4">member + 3 guests</option>
if wanna show individual div... can try one..
Comments
Post a Comment