javascript - Drop down that instantly switches info -
i looking write html page has drop down menu on , content. instance, drop down menu has 7 days of week listed , depending day selected div contains day's activities. know how make work can pick day want, press button, , browser loads new page desired info. how go writing user clicks on drop down menu entry page's info alters. thinking maybe store info in bunch of hidden divs that, upon clicking on drop down menu's entry, swapped in , out. i'm not sure, however, how capture event of entry in drop-down menu being selected.
i thinking maybe store info in bunch of hidden divs that, upon clicking on drop down menu's entry, swapped in , out.
you can use ajax load data.
i'm not sure, however, how capture event of entry in drop-down menu being selected.
javascript has lots of events: http://www.w3schools.com/jsref/dom_obj_event.asp
i've done poor example using divs:
<html> <body> <select id="day"> <option>mon</option> <option>tue</option> <option>wed</option> <option>thu</option> <option>fri</option> <option>sat</option> <option>sun</option> </select> <div id="mon">mon contents</div> <div id="tue" style="display: none;">tue contents</div> <div id="wed" style="display: none;">wed contents</div> <div id="thu" style="display: none;">thu contents</div> <div id="fri" style="display: none;">fri contents</div> <div id="sat" style="display: none;">sat contents</div> <div id="sun" style="display: none;">sun contents</div> <script> var day = document.getelementbyid ( "day" ); var current_day = day.value; function change_day () { document.getelementbyid(current_day).style.display = "none"; document.getelementbyid(day.value).style.display = "block"; current_day = day.value; } day.addeventlistener("change", change_day); </script> </body> </html>
Comments
Post a Comment