Jump to content

dropdown selected


contra10

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

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]

Link to comment
https://forums.phpfreaks.com/topic/142287-dropdown-selected/
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
https://forums.phpfreaks.com/topic/142287-dropdown-selected/#findComment-745465
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.