Jump to content

dropdown selected


Recommended Posts

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


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


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






<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 name="event" id="event"  STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;">
<option value=""></option>

Link to comment
Share on other sites

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()">

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.