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

see in action @ jsfiddle.


~~~
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

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

-
my group , running server based upon django , uses mod_wsgi run apache server. not working on project after over, attempting set cronjob similar functionality check if apache server has shut down(system restart or power failure), , if has, restart server me. i've found documentation on how check if apache server down , restart server if is, our server uses https , our start command pretty verbose. can use functionality provided in these examples: https://askubuntu.com/questions/277389/cron-job-to-restart-apache https://www.digitalocean.com/community/tutorials/how-to-use-a-simple-bash-script-to-restart-server-programs or need more complicated process make happen? the command use start server is python manage.py runmodwsgi --host 0.0.0.0 --port 8001 --https-port 8000 --ssl-certificate (certificate location) --server-name (domain name) i'm pretty new linux , using both mod-wsgi apache appreciated. you better off using --setup-only option mod_wsgi-expres...
Read more

actionscript 3 - TweenLite does not work with object -

-
i got following problem: i have object called tempscore game. this object blitted canvas renderer via copypixels method. object not display object. it's score-object (self made). score-object extends object called basicblitarrayobject. basicblitarrayobject extends eventdispatcher (therefore no display object). i tried apply several different tweenlite-plugins tempscore-object (i.e. transformaroundcenter, colormatrixfilter, etc.). nothing happens. absolutely nothing. sometimes error messages (when plugin requires display object , object not display object). far good. according greensock (maker of tweenlite) engine can tween numeric property of object. when plugin transformaroundcenter requires display object tweening have modify plugin working non-display object (tempscore). can't because it's way hard me. my game rests upon code: http://www.8bitrocket.com/book/ch11_blastermines.zip try apply tweenlite object called tempmine inside game class blastermines. ...
Read more

jQuery Ajax Render Fragments OR Whole Page -

-
i'm in throes of building application wraps mess of legacy code. page working on, need substitute fragment divs constructed on back-end -- or else need replace entire page altogether. idea there dynamically controlled flow needs satisfied before can forward legacy product. substituting fragments works fine, seen in below my_body_content swap. trouble comes when i'm trying render not fragment, whole page, in "body" swap. @ point page goes blank. i want similar errors returned server. want nice rest 404 error messages displayed on screen, legacy-product 404s show in legacy-product 404 page. yes, requirements project weird. that's not problem can fix. here's jquery invocation, names changed protect guilty: $.ajax({ url: "places/things", type: "post", data: json.stringify(somebadassobject), datatype: "text", accepts: "text/html", contenttype: "application/json; charset=...
Read more