contra10 Posted January 24, 2009 Share Posted January 24, 2009 i have a dropdown menu that loads when clicked...but an option should be shown simply when the page is loaded...instead i have to click another option to get the code to work and then click back onto the option that is already supposed to be selected... basically my selected dropdown does not get any results in the second dropdown... i.e "Arts" does not show the sub categories in the next dropdown menu unless i click another dropdown option and go back to the "Arts" option... here's my coding events.php <script type="text/javascript"> // event lists var event = new Array(); event['arts'] = ['Acting','Dancing','Paint/Draw', 'Poetry', 'Theater']; event['business'] = ['Meeting']; event['cause'] = ['Assembly','Fundraiser','Protest','Rally','Meeting']; event['cultural'] = ['Gathering','Tradition']; event['entertainment'] = ['Amusement Park','Bowling','Comedy','Movies']; event['education'] = ['California','Graduation','New York']; event['fashion'] = ['Fashion Show','Chihuahua','Jalisco']; event['justforfun'] = ['California','Florida','New York']; event['outdoors'] = ['Group Trip','Vacation']; event['party'] = ['Barbeque','','Club Party','Slumber Party']; event['political'] = ['Convention','Policy','Speaker']; event['private'] = ['Invitations Only']; event['sport'] = ['Baja California','Chihuahua','Tournament']; event['other'] = ['Ceremony','Other','Religious']; function setevent(){ evaSel = document.getElementById('eva'); eventSel = document.getElementById('event'); eventList = event[evaSel.value]; changeSelect(eventSel, eventList); setsubevent(); } function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) { //Clear the select list fieldObj.options.length = 0; //Set the option text to the values if not passed optTextAry = (optTextAry)?optTextAry:valuesAry; //Itterate through the list and create the options for (var i=0; i<valuesAry.length; i++) { selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false; fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag); } } </script> and html <tr><td> <b>Category:</td> <td> <select name="eva" id="eva" onchange="setevent();"> <option value="arts" selected>Arts</option> <option value="cause">Cause</option> <option value="cultural">Cultural</option> <option value="entertainment">Entertainment</option> <option value="education">Education</option> <option value="fashion">Fashion</option> <option value="justforfun">Just for Fun</option> <option value="outdoors">Outdoors</option> <option value="party">Party</option> <option value="political">Political</option> <option value="private">Private</option> <option value="sport">Sport</option> <option value="cause">Other</option> </select> <select name="event" id="event" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;"> <option value=""></option> [code] Quote Link to comment Share on other sites More sharing options...
contra10 Posted January 24, 2009 Author Share Posted January 24, 2009 i tired putting "Arts" as selected Quote Link to comment Share on other sites More sharing options...
bobleny Posted January 24, 2009 Share Posted January 24, 2009 What I normally do with drop boxes is add a "blank" option... I would do something like this: <select name="eva" id="eva" onchange="setevent();"> <option value="" selected>Select an Option</option> <option value="arts">Arts</option> <option value="cause">Cause</option> <option value="cultural">Cultural</option> .... This would force the user to click arts, thereby making you script work again. However, the work around is to use the onload() event to trigger the menu: <body onload="setevent()"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.