jquery - Hide/Show Dropdowns based on previous dropdown selection with Javascript -
looking answer in jquery or mootools (mootools preferably) - have 2 'hidden' drop downs , 1 shows.
once user selects choice displayed dropdown, want appropriate dropdown list show up. once make selection 2nd list, appropriate 3rd list show up.
if user goes , changes choice on first drop down, other drop downs should go being hidden, , 2nd dropdown list should show.
the current setup works first time user loads page - if select first drop down, appropriate list in 2nd drop down displays. if go , change it, nothing happens. i'm sure it's javascript i'm not it. looking this.
here current js:
var lastlist = ""; function changedropdowns(listname){ //hide last div if (lastlist) { document.getelementbyid('lastlist').style.display='none'; } //value box not nothing & object exists - change class display if (listname && document.getelementbyid(listname)){ document.getelementbyid(listname).style.display ='block'; lastlist=listname; } } my current html looks this: (i've included first , 2nd dropdowns, 3rd further breakdown)
dropdown 1 (shown when page loaded):
<div class="ccms_form_element cfdiv_custom" id="style_container_div"> <label>beer style:</label><select size="1" id="style" class=" validate['required']" title="" type="select" name="style" onchange="changedropdowns(this.value)"> <option value="">-choose style-</option> <option value="ale">ale</option> <option value="lager">lager</option> <option value="hybrid">hybrid</option> </select><div class="clear"></div><div id="error-message-style"></div></div> dropdown 2 (hidden - can see):
<div id="ale" class="style-sub-1" style="display: none;" name="stylesub1" onchange="changedropdowns(this.value)"> <label>which kind of ale?</label> <select> <option value="">-choose ale-</option> <option value="american ale">american ale</option> <option value="belgian / french ale">belgian / french ale</option> <option value="english ale">english ale</option> <option value="finnish ale">finnish ale</option> <option value="german ale">german ale</option> <option value="irish ale">irish ale</option> <option value="russian ale">russian ale</option> <option value="scottish ale">scottish ale</option> </select> </div> <div id="lager" class="style-sub-1" style="display: none;" name="stylesub1" onchange="changedropdowns(this.value)"> <label>which kind of lager?</label> <select> <option value="">-choose lager-</option> <option value="american lager">american lager</option> <option value="czech lager">czech lager</option> <option value="european lager">european lager</option> <option value="german lager">german lager</option> <option value="japanese lager">japanese lager</option> </select> </div> <div id="hybrid" class="style-sub-1" style="display: none;" name="stylesub1" onchange="changedropdowns(this.value)"> <label>which kind of hybrid?</label> <select> <option value="">-choose hybrid-</option> <option value="fruit / vegetable beer">fruit / vegetable beer</option> <option value="herbed / spiced beer">herbed / spiced beer</option> <option value="smoked beer">smoked beer</option> </select> </div><div class="clear"></div><div id="error-message-style-sub-1"></div></div>
this code work 2 levels shown:
$("#beerstyle").change ( function () { var targid = $(this).val (); $("div.style-sub-1").hide (); $('#' + targid).show (); } )
~~~
3 levels of dropdowns, code becomes:
$("#beerstyle").change ( function () { var targid = $(this).val (); $("div.style-sub-1, div.style-sub-2").hide (); $('#' + targid).show (); } ) $("div.style-sub-1 select").change ( function () { /*--- these option values non-standard double safe id's. change values of option tags safe id's or add rel attribute hold id's. */ var targid = $(this).val (); $("div.style-sub-2").hide (); $('#' + targid).show (); } )
note changed id "style" "beerstyle". not use super-common, or reserved words identifiers!
Comments
Post a Comment