Two (pulldown) lists

F

Francois

Hi,

In my form I want people to be able to select a startingpoint (month)
and then an endingpoint (month). I can make one list with all te
possible months, and another with again all possible months, but in
that way it is possible to select (i.e.) from june2003 to
february2003.

To make that (reverse) selection impossible, the options in the second
list should change when the user selects a month in the first list.

Example:

First list (From): (last month is automaticly deleted by cgi-script)
January
February
March
April
May

Second list (To): (first month is automaticly deleted by cgi-script)
February
March
April
May
June

The user selects 'March' in the first list.
The only options in the second list should be:
April
May
June

Can anyone tell me how to do this? I think a javascript would be best
for this...
PS If neccessary, the cgi-script to delete the first month of the
second list is ajustable.

The code I have now:

From:
<select name="form_period_begin" id="form_period_begin">
<option value='101>2003' selected>jan03</option>
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrc03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>may03</option>
</select><br>

To:
<select name="form_period_end" id="form_period_end">
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrc03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>may03</option>
<option value='106>2003' selected>jun03</option>
</select>
 
S

Stuart Palmer

Look up 'new option' and a related post called 'simple HTML issue' it may
help.
You may need to null 2nd drop down and create new options for the remaining
months.

Stu
 
F

Francois

With help from some postings and some sites I made this script.
Anyone can improve this?

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
var JSmaanden = new Array("jan03","feb03","mrt03","apr03","mei03","jun03");
var JSdatums = new
Array("101>2003","102>2003","103>2003","104>2003","105>2003","106>2003");

function selecter(){
document.formulier.form_periode_eind.selectedIndex =
document.formulier.form_periode_eind.options.length-1;
}

function changelist2(begin) {
document.formulier.form_periode_eind.options.length = 0;
beginmaand = begin.options[begin.selectedIndex].value
mstatus="inactive";
for (i=0; i<JSmaanden.length; i++) {
if (mstatus == "active") {
document.formulier.form_periode_eind.add(new Option(JSmaanden,
JSdatums));
}
if (JSdatums == beginmaand) {
mstatus = "active";
}
}
selecter();
}
</script>
</head>

<body onLoad="selecter();">
<form name="formulier" id="formulier">

From:
<select name="form_periode_begin" id="form_periode_begin"
onChange="changelist2(this)">
<option value='101>2003'>jan03</option>
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrt03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>mei03</option>
</select><br>

To:
<select name="form_periode_eind" id="form_periode_eind" >
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrc03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>mei03</option>
<option value='106>2003'>jun03</option>
</select>
</form>
</body>
</html>
 
O

Oz

There is rather simple way to do this since both options lists are
identical:

function restrict(start){
//get the starting options
var options = start.options;
//get the index of the month selected
var index = start.selectedIndex;
//clear the end options
var end = document.getElementById("form_period_end");
end.innerHTML = "";
//clone the moths after the selected month and append to the end select
for (var i=index;i<options.length;i++) {
var newOption = options.cloneNode(true);
end.appendChild(newOption);
}

}



</script>

<select name="form_period_begin" id="form_period_begin"
onchange="restrict(this)">
<option value='101>2003' selected>jan03</option>
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrc03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>may03</option>
</select><br>
<select name="form_period_end" id="form_period_end">
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrc03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>may03</option>
<option value='106>2003' selected>jun03</option>
</select>
 
S

Stuart Palmer

Good job for IE, but don't forget to test in NS...

Francois said:
With help from some postings and some sites I made this script.
Anyone can improve this?

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
var JSmaanden = new Array("jan03","feb03","mrt03","apr03","mei03","jun03");
var JSdatums = new
Array("101>2003","102>2003","103>2003","104>2003","105>2003","106>2003");

function selecter(){
document.formulier.form_periode_eind.selectedIndex =
document.formulier.form_periode_eind.options.length-1;
}

function changelist2(begin) {
document.formulier.form_periode_eind.options.length = 0;
beginmaand = begin.options[begin.selectedIndex].value
mstatus="inactive";
for (i=0; i<JSmaanden.length; i++) {
if (mstatus == "active") {
document.formulier.form_periode_eind.add(new Option(JSmaanden,
JSdatums));
}
if (JSdatums == beginmaand) {
mstatus = "active";
}
}
selecter();
}
</script>
</head>

<body onLoad="selecter();">
<form name="formulier" id="formulier">

From:
<select name="form_periode_begin" id="form_periode_begin"
onChange="changelist2(this)">
<option value='101>2003'>jan03</option>
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrt03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>mei03</option>
</select><br>

To:
<select name="form_periode_eind" id="form_periode_eind" >
<option value='102>2003'>feb03</option>
<option value='103>2003'>mrc03</option>
<option value='104>2003'>apr03</option>
<option value='105>2003'>mei03</option>
<option value='106>2003'>jun03</option>
</select>
</form>
</body>
</html>


Stuart Palmer said:
Look up 'new option' and a related post called 'simple HTML issue' it may
help.
You may need to null 2nd drop down and create new options for the remaining
months.

Stu
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Collect Excel Data from Website 5
simple code for selecting matching text in a listbox 2
Set value after clicking in field 11
Survey details won't go through using php, ajax, Mysql 0
Limit selection in list Box 4
Select List transfer to another List with array 0
Dynmically creating elements in a table works with firefox, opera, but not ie 3
Jquery not triggering / acting as expected. 0

Members online

No members online now.
Total: 73 (members: 2, guests: 71)
Robots: 50

Forum statistics

Threads
473,813
Messages
2,569,699
Members
45,489
Latest member
SwethaJ

Latest Threads

Top