Really simple dynamic drop down

waynew · November 12, 2008

I have two lists/menus. One has the date. Now when a user chooses a certain date, the JavaScript is supposed to populate the second list/menu with times, depending on whether its a weekday or weekend. For some reason, however, it doesn't work? This can be tested on your local computer as all values are hard-coded.

You also might notice three JavaScript arrays at the start. One holds weekday times, one holds weekend times and the other holds all dates that are weekends.

Here is the JavaScript.

<?php

$skate_wdaytimes = array("14:45","16:00","17:15","18:30","20:45","21:00");
$skate_wkdtimes = array("12:15","13:30","14:45","16:00","17:15","18:30","19:45","21:00");

?>

<script language="javascript">
var weekdaytimes = new Array();
var weekendtimes = new Array();
var weekends = new Array("2008-11-29","2008-11-30","2008-12-06","2008-12-07","2008-12-07","2008-12-13","2008-12-14","2008-12-20","2008-12-21","2008-12-27","2008-12-28","2009-01-03","2009-01-04","2009-01-10","2009-01-11");

<?php 
$i = 0;
while($i < sizeof($skate_wdaytimes)){
echo 'weekdaytimes['.$i.'] = "'.$skate_wdaytimes[$i].'";'."\n";
$i++;
}

$i = 0;
while($i < sizeof($skate_wkdtimes)){
echo 'weekendtimes['.$i.'] = "'.$skate_wkdtimes[$i].'";'."\n";
$i++;
}
?>

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.time);
addOption(document.drop_list.time, "", "Time", "");

var weekday = true; //assume true
var x;
for (x in weekends){
	if(document.drop_list.date.value == weekends[x]){
		weekday = false;
	}
}

if(weekday == false){
	for (x in weekendtimes){
		addOption(document.drop_list.time,weekendtimes[x],weekendtimes[x]);
	}
}

else if(weekday == true){
	for (x in weekdaytimes){
		addOption(document.drop_list.time,weekdaytimes[x],weekdaytimes[x]);
	}
}
}

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
	//selectbox.options.remove(i);
	selectbox.remove(i);
}
}


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}
</script>

Here are the lists/menus:

<select id="date" name="date">
  <option value="2008-11-28" selected>Friday 28 November</option>
  <option value="2008-11-29">Saturday 29 November</option>
  <option value="2008-11-30">Sunday 30 November</option>
  <option value="2008-12-01">Monday 01 December</option>
  <option value="2008-12-02">Tuesday 02 December</option>
  <option value="2008-12-03">Wednesday 03 December</option>
  <option value="2008-12-04">Thursday 04 December</option>
  <option value="2008-12-05">Friday 05 December</option>
  <option value="2008-12-06">Saturday 06 December</option>
  <option value="2008-12-07">Sunday 07 December</option>
  <option value="2008-12-08">Monday 08 December</option>
  <option value="2008-12-09">Tuesday 09 December</option>
  <option value="2008-12-10">Wednesday 10 December</option>
  <option value="2008-12-11">Thursday 11 December</option>
  <option value="2008-12-12">Friday 12 December</option>
  <option value="2008-12-13">Saturday 13 December</option>
  <option value="2008-12-14">Sunday 14 December</option>
  <option value="2008-12-15">Monday 15 December</option>
  <option value="2008-12-16">Tuesday 16 December</option>
  <option value="2008-12-17">Wednesday 17 December</option>
  <option value="2008-12-18">Thursday 18 December</option>
  <option value="2008-12-19">Friday 19 December</option>
  <option value="2008-12-20">Saturday 20 December</option>
  <option value="2008-12-21">Sunday 21 December</option>
  <option value="2008-12-22">Monday 22 December</option>
  <option value="2008-12-23">Tuesday 23 December</option>
  <option value="2008-12-24">Wednesday 24 December</option>
  <option value="2008-12-26">Friday 26 December</option>
  <option value="2008-12-27">Saturday 27 December</option>
  <option value="2008-12-28">Sunday 28 December</option>
  <option value="2008-12-29">Monday 29 December</option>
  <option value="2008-12-30">Tuesday 30 December</option>
  <option value="2008-12-31">Wednesday 31 December</option>
  <option value="2009-01-01">Thursday 01 January</option>
  <option value="2009-01-02">Friday 02 January</option>
  <option value="2009-01-03">Saturday 03 January</option>
  <option value="2009-01-04">Sunday 04 January</option>
  <option value="2009-01-05">Monday 05 January</option>
  <option value="2009-01-06">Tuesday 06 January</option>
  <option value="2009-01-07">Wednesday 07 January</option>
  <option value="2009-01-08">Thursday 08 January</option>
  <option value="2009-01-09">Friday 09 January</option>
  <option value="2009-01-10">Saturday 10 January</option>
  <option value="2009-01-11">Sunday 11 January</option>
  <option value="2009-01-12">Monday 12 January</option>
  <option value="2009-01-13">Tuesday 13 January</option>
</select>

<select name="time" id="time" onChange="SelectSubCat();">
</select>

Any help would be appreciated.

waynew · November 12, 2008

I found one problem. I put the onChange on the time list instead of the date list. Now, when I change the date, the onChange event occurs, which what was supposed to happen. However, when I do, a JavaScript error happens.

document.drop_list.time is null or not an object

waynew · November 12, 2008

It's okay. I figured out the problem. I didn't give my form tag the id drop_list.

rarebit · November 12, 2008

I like to grab an element and use a reference to it. This is how I changed the 'SelectSubCat()' function. I'd even probably get the reference at init time rather than do it every time the functions called, but it's really here or there.


function SelectSubCat(){
// ON selection of category this function will work

list_time = document.getElementById('time');
list_date = document.getElementById('date');

   removeAllOptions(list_time);
   addOption(list_time, "", "Time", "");

   var weekday = true; //assume true
   var x;
   for (x in weekends){
      if(list_date.value == weekends[x]){
         weekday = false;
      }
   }

   if(weekday == false){
      for (x in weekendtimes){
         addOption(list_time,weekendtimes[x],weekendtimes[x]);
      }
   }
   
   else if(weekday == true){
      for (x in weekdaytimes){
         addOption(list_time,weekdaytimes[x],weekdaytimes[x]);
      }
   }
}

And this is what the form looks like. Oh yes I moved the onclick handler to the first list!

<form>
<select id="date" onChange="SelectSubCat();">
  <option value="2008-11-28" selected>Friday 28 November</option>
  <option value="2008-11-29">Saturday 29 November</option>
  <option value="2008-11-30">Sunday 30 November</option>
  <option value="2008-12-01">Monday 01 December</option>
  <option value="2008-12-02">Tuesday 02 December</option>
  <option value="2008-12-03">Wednesday 03 December</option>
  <option value="2008-12-04">Thursday 04 December</option>
  <option value="2008-12-05">Friday 05 December</option>
  <option value="2008-12-06">Saturday 06 December</option>
  <option value="2008-12-07">Sunday 07 December</option>
  <option value="2008-12-08">Monday 08 December</option>
  <option value="2008-12-09">Tuesday 09 December</option>
  <option value="2008-12-10">Wednesday 10 December</option>
  <option value="2008-12-11">Thursday 11 December</option>
  <option value="2008-12-12">Friday 12 December</option>
  <option value="2008-12-13">Saturday 13 December</option>
  <option value="2008-12-14">Sunday 14 December</option>
  <option value="2008-12-15">Monday 15 December</option>
  <option value="2008-12-16">Tuesday 16 December</option>
  <option value="2008-12-17">Wednesday 17 December</option>
  <option value="2008-12-18">Thursday 18 December</option>
  <option value="2008-12-19">Friday 19 December</option>
  <option value="2008-12-20">Saturday 20 December</option>
  <option value="2008-12-21">Sunday 21 December</option>
  <option value="2008-12-22">Monday 22 December</option>
  <option value="2008-12-23">Tuesday 23 December</option>
  <option value="2008-12-24">Wednesday 24 December</option>
  <option value="2008-12-26">Friday 26 December</option>
  <option value="2008-12-27">Saturday 27 December</option>
  <option value="2008-12-28">Sunday 28 December</option>
  <option value="2008-12-29">Monday 29 December</option>
  <option value="2008-12-30">Tuesday 30 December</option>
  <option value="2008-12-31">Wednesday 31 December</option>
  <option value="2009-01-01">Thursday 01 January</option>
  <option value="2009-01-02">Friday 02 January</option>
  <option value="2009-01-03">Saturday 03 January</option>
  <option value="2009-01-04">Sunday 04 January</option>
  <option value="2009-01-05">Monday 05 January</option>
  <option value="2009-01-06">Tuesday 06 January</option>
  <option value="2009-01-07">Wednesday 07 January</option>
  <option value="2009-01-08">Thursday 08 January</option>
  <option value="2009-01-09">Friday 09 January</option>
  <option value="2009-01-10">Saturday 10 January</option>
  <option value="2009-01-11">Sunday 11 January</option>
  <option value="2009-01-12">Monday 12 January</option>
  <option value="2009-01-13">Tuesday 13 January</option>
</select>

<select id="time" ></select>
</form>

Basically worked..

OK you've posted twice, hope this still helps!

Sign In

Really simple dynamic drop down

Recommended Posts

waynew

Link to comment

Share on other sites

waynew

Link to comment

Share on other sites

waynew

Link to comment

Share on other sites

rarebit

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information