Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Is there an easier way to write this dynamic select?

Status
Not open for further replies.
mtorbin

mtorbin

Technical User
Nov 5, 2002
369
US
Hey all,

I'm having trouble with the following code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
<!--
function changeDate(){
    switch(document.myForm.month.value) {
		case "january":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
	    case "february":
		    document.myForm.days.options[28] = null;
			document.myForm.days.options[28] = null;
			document.myForm.days.options[28] = null;
			document.myForm.days.options[28] = null;
			alert(document.myForm.days.length);
			break;
	    case "march":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
	    case "april":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
		    document.myForm.days.options[30] = null;
			alert(document.myForm.days.length);
			break;
		case "may":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
		case "june":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
		        if (document.myForm.days.options[30]) {
				    document.myForm.days.options[30] = null;
			    }
				if (document.myForm.days.options[31]) {
				    document.myForm.days.options[31] = null;
			    }
			alert(document.myForm.days.length);
			break;
		case "july":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
		case "august":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
		case "september":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
		    document.myForm.days.options[30] = null;
			alert(document.myForm.days.length);
			break;
		case "october":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
		case "november":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
		    document.myForm.days.options[30] = null;
			alert(document.myForm.days.length);
			break;
		case "december":
		       if (document.myForm.days.options[29] == null) {
			      document.myForm.days.options[29] = new Option('29','29'); 
			   }
			   if (document.myForm.days.options[30] == null) {
			      document.myForm.days.options[30] = new Option('30','30'); 
			   }
			   if (document.myForm.days.options[31] == null) {
			      document.myForm.days.options[31] = new Option('31','31'); 
			   }
			alert(document.myForm.days.length);
			break;
	}
}



//-->
</script>
</head>

<body onLoad="alert(document.myForm.days.length);">
<form name="myForm" id="myForm">
<table width="25%" border="0" cellpadding="2" cellspacing="0">
 <tr align="center">
  <td>

    <select name="month" onChange="changeDate()">
        <option value="january" selected>January</option>
        <option value="february">February</option>
		<option value="march">March</option>
		<option value="april">April</option>
		<option value="may">May</option>
		<option value="june">June</option>
		<option value="july">July</option>
		<option value="august">August</option>
		<option value="september">September</option>
		<option value="october">October</option>
		<option value="november">November</option>
		<option value="december">December</option>
    </select>
	</td>
	<td>
    	<select name="days">
	    <option value="01" selected>01</option>
		<option value="02">02</option>
		<option value="03">03</option>
		<option value="04">04</option>
		<option value="05">05</option>
		<option value="06">06</option>
		<option value="07">07</option>
		<option value="08">08</option>
		<option value="09">09</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
		<option value="13">13</option>
		<option value="14">14</option>
		<option value="15">15</option>
		<option value="16">16</option>
		<option value="17">17</option>
		<option value="18">18</option>
		<option value="19">19</option>
		<option value="20">20</option>
		<option value="21">21</option>
		<option value="22">22</option>
		<option value="23">23</option>
		<option value="24">24</option>
		<option value="25">25</option>
		<option value="26">26</option>
		<option value="27">27</option>
		<option value="28">28</option>
		<option value="29">29</option>
        <option value="30">30</option>
		<option value="31">31</option>
	</select>    
   </td>
  </tr>
 </table>
</form>
</body>
</html>

Is there an easier way to do this?

Thanks,

- MT
 
Sort by date Sort by votes
What is your goal with this code...Easier way in the sense...?

Dynamically build a drop downs for the year, month and day....
 
Upvote 0 Downvote
When the user selects the month dropdown the day dropdown will automatically change so that they can't select, say, 11/31/2006 which doesn't exist.

- MT
 
Upvote 0 Downvote
Ok, I don't know why I didn't think of this last night, but this works SO much better:

Code: 
<script>
<!--
function changeDate(selectedMonth) {
    alert(selectedMonth);
	switch(selectedMonth) {
		case "january":
		   createOptions(31);
		   break;
		case "february":
		   createOptions(28);
		   break;
		case "march":
		   createOptions(31);
		   break;
	    case "april":
		   createOptions(30);
		   break;
		case "may":
		   createOptions(31);
		   break;
		case "june":
		   createOptions(30);
		   break;
	    case "july":
		   createOptions(31);
		   break;
		case "august":
		   createOptions(31);
		   break;
	    case "september":
		   createOptions(30);
		   break;
		case "october":
		   createOptions(31);
		   break;
	    case "november":
		   createOptions(30);
		   break;
		case "december":
		   createOptions(31);
		   break;
	}
}


function createOptions(numberOfDays) {
     document.myForm.days.options.length = 0;
     for(var i = 1; i <= numberOfDays; i++) {
	     if (i = 1) {
	         document.myForm.days.options[i] = new Option(i,i);
			 
	     }
		 document.myForm.days.options[i] = new Option(i,i);
	 }
	 return;
}

I just have to find a way to mark the one as selected via javascript.

- MT
 
Upvote 0 Downvote
Here's the updated code. The selected = true part isn't working yet so any advice would be much apprecited:

Code: 
function changeDate(selectedMonth) {
    alert(selectedMonth);
	switch(selectedMonth) {
		case "january":
		   createOptions(31);
		   break;
		case "february":
		   createOptions(28);
		   break;
		case "march":
		   createOptions(31);
		   break;
	    case "april":
		   createOptions(30);
		   break;
		case "may":
		   createOptions(31);
		   break;
		case "june":
		   createOptions(30);
		   break;
	    case "july":
		   createOptions(31);
		   break;
		case "august":
		   createOptions(31);
		   break;
	    case "september":
		   createOptions(30);
		   break;
		case "october":
		   createOptions(31);
		   break;
	    case "november":
		   createOptions(30);
		   break;
		case "december":
		   createOptions(31);
		   break;
	}
}


function createOptions(numberOfDays) {
     document.myForm.days.options.length = 0;
     for(var i = 1; i <= numberOfDays; i++) {
	     if (i == 1) {
	         document.myForm.days.options[i] = new Option(i,i);
			 document.myForm.days.options[i].selected = true;
	     }
		 document.myForm.days.options[i] = new Option(i,i);
	 }
	 return;
}
 
Upvote 0 Downvote
Not positive, but you could try
Code: 
document.myForm.days.selectedIndex = 1;
 
Upvote 0 Downvote
Thanks all. Here is the final (working) version:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
<!--
function changeDate(selectedMonth) {
	switch(selectedMonth) {
		case "january":
		   createOptions(31);
		   break;
		case "february":
		   createOptions(28);
		   break;
		case "march":
		   createOptions(31);
		   break;
	    case "april":
		   createOptions(30);
		   break;
		case "may":
		   createOptions(31);
		   break;
		case "june":
		   createOptions(30);
		   break;
	    case "july":
		   createOptions(31);
		   break;
		case "august":
		   createOptions(31);
		   break;
	    case "september":
		   createOptions(30);
		   break;
		case "october":
		   createOptions(31);
		   break;
	    case "november":
		   createOptions(30);
		   break;
		case "december":
		   createOptions(31);
		   break;
	}
}


function createOptions(numberOfDays) {
     document.myForm.days.options.length = 0;
     for(var i = 1; i <= numberOfDays; i++) {
	     document.myForm.days.options[i] = new Option(i,i);
	     if (i == 1) {
			 document.myForm.days.options[i].selected = true;
	     }
	 }
	 return;
}
//-->
</script>
</head>

<body>
<form name="myForm" id="myForm">
<table width="25%" border="0" cellpadding="2" cellspacing="0">
 <tr align="center">
  <td>

    <select name="month" onChange="changeDate(this.value)">
        <option value="january" selected>January</option>
        <option value="february">February</option>
		<option value="march">March</option>
		<option value="april">April</option>
		<option value="may">May</option>
		<option value="june">June</option>
		<option value="july">July</option>
		<option value="august">August</option>
		<option value="september">September</option>
		<option value="october">October</option>
		<option value="november">November</option>
		<option value="december">December</option>
    </select>
	</td>
	<td>
    	<select name="days">
	    <option value="1" selected>1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
		<option value="13">13</option>
		<option value="14">14</option>
		<option value="15">15</option>
		<option value="16">16</option>
		<option value="17">17</option>
		<option value="18">18</option>
		<option value="19">19</option>
		<option value="20">20</option>
		<option value="21">21</option>
		<option value="22">22</option>
		<option value="23">23</option>
		<option value="24">24</option>
		<option value="25">25</option>
		<option value="26">26</option>
		<option value="27">27</option>
		<option value="28">28</option>
		<option value="29">29</option>
        <option value="30">30</option>
		<option value="31">31</option>
	</select>    
   </td>
  </tr>
 </table>
</form>
</body>
</html>
 
Upvote 0 Downvote
Don't forget leap years. :)

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
If you look at the definition of the CASE statement you can do the following which does save a few lines :

case "january":
case "march":
createOptions(31);
break;

Although you may be better off having a DEFAULT clause in the case statement for those with 31 days.


Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005
 
Upvote 0 Downvote
Thanks guys! OK, here's part two. I want to make this exensible so I made the following changes (please note I'm not going to post the full code as it's already posted above. Only the changes will be posted):

Code: 
<body onLoad="buildPage('myForm','theMonth','theDay','theYear');">
and
Code: 
function buildPage(formName,monthName,dayName,yearName) {

    formName = document.formName.name;
	monthName = document.formName.monthName.name;
	dayName = document.formName.dayName.name;
	yearName = document.formName.yearName.name;

    alert(formName + " " + monthName + " " + dayName + " " + yearName);
}

I can't figure out why I can't refer to the form elements by using a variable. No matter what I try I always get "document.formName has no properties".

Ideas?

- MT
 
Upvote 0 Downvote
I just realized that the full code above has NOT been posted, so here it is:

Code: 
// Dynamic Date List Boxes
var i;

var today = new Date();
var currentYear = today.getYear();
var currentMonth = today.getMonth();
var currentDay = today.getDate();

var months = new Array();
    months[0] = "january";
	months[1] = "february";
	months[2] = "march";
	months[3] = "april";
	months[4] = "may";
	months[5] = "june";
	months[6] = "july";
	months[7] = "august";
	months[8] = "september";
	months[9] = "october";
	months[10] = "november";
	months[11] = "december";
	
var years = new Array();
    years[0] = "2001";
	years[1] = "2002";
	years[2] = "2003";
	years[3] = "2004";
	years[4] = "2005";
	years[5] = "2006";
	years[6] = "2007";

function formatYear(digit) {
	var browser = navigator.appName;
	var correctYear = digit;
	
	if(browser == "Netscape") {
	    correctYear = correctYear + 1900;
	}
	return correctYear;
}

function buildMonthSelect() {
    for(i = 0; i < months.length; i++) {
	    document.myForm.theMonth.options[i] = new Option(months[i].toUpperCase(),i+1);
		if (i == currentMonth) {
		    document.myForm.theMonth.options[i].selected = true;
		}
	}
}

function buildDaySelect() {
    for(i = 1; i < 32; i++) {
	    document.myForm.theDay.options[i] = new Option(i,i);
	    if (i == currentDay) {
			 document.myForm.theDay.options[i].selected = true;
	     }
	}
}

function buildYearSelect() {
    for(i = 0; i < years.length; i++) {
	    document.myForm.theYear.options[i] = new Option(years[i],years[i]);
		if (years[i] == formatYear(currentYear)) {
			 document.myForm.theYear.options[i].selected = true;
	    }
	}
}

function buildPage() {
    buildMonthSelect();
	buildDaySelect();
	buildYearSelect();
}

function changeDate(selectedMonth) {
	switch(selectedMonth) {
		case "1":
		   createOptions(31);
		   break;
		case "2":
		   createOptions(28);
		   break;
		case "3":
		   createOptions(31);
		   break;
	    case "a4":
		   createOptions(30);
		   break;
		case "5":
		   createOptions(31);
		   break;
		case "6":
		   createOptions(30);
		   break;
	    case "7":
		   createOptions(31);
		   break;
		case "8":
		   createOptions(31);
		   break;
	    case "9":
		   createOptions(30);
		   break;
		case "10":
		   createOptions(31);
		   break;
	    case "11":
		   createOptions(30);
		   break;
		case "12":
		   createOptions(31);
		   break;
	}
}


function createOptions(numberOfDays) {
     document.myForm.theDay.options.length = 0;
     for(var i = 1; i <= numberOfDays; i++) {
	     document.myForm.theDay.options[i] = new Option(i,i);
	     if (i == 1) {
			 document.myForm.theDay.options[i].selected = true;
	     }
	 }
	 return;
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
373
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top