Two (pulldown) lists | | |
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>
| | | | re: Two (pulldown) lists
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
"Francois" <google@francoissachs.nl> wrote in message
news:16ccb02.0310230013.35177df4@posting.google.co m...[color=blue]
> 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>[/color]
| | | | re: Two (pulldown) lists
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","jun 03");
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.lengt h-1;
}
function changelist2(begin) {
document.formulier.form_periode_eind.options.lengt h = 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[i],
JSdatums[i]));
}
if (JSdatums[i] == 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" <tryandspamme@youcant.com> wrote[color=blue]
> 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[/color]
remaining[color=blue]
> months.
>
> Stu
>
> "Francois" <google@francoissachs.nl> wrote[color=green]
> > 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>[/color]
>
>[/color]
| | | | re: Two (pulldown) lists
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[i].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>
"Francois" <google@francoissachs.nl> wrote in message
news:16ccb02.0310230013.35177df4@posting.google.co m...[color=blue]
> 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>[/color]
| | | | re: Two (pulldown) lists
Good job for IE, but don't forget to test in NS...
"Francois" <francois.sachs@gidesign.nl> wrote in message
news:3f992ded$0$267$19deed1b@news.inter.NL.net...[color=blue]
> 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[/color]
Array("jan03","feb03","mrt03","apr03","mei03","jun 03");[color=blue]
> 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.lengt h-1;
> }
>
> function changelist2(begin) {
> document.formulier.form_periode_eind.options.lengt h = 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[i],
> JSdatums[i]));
> }
> if (JSdatums[i] == 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" <tryandspamme@youcant.com> wrote[color=green]
> > Look up 'new option' and a related post called 'simple HTML issue' it[/color][/color]
may[color=blue][color=green]
> > help.
> > You may need to null 2nd drop down and create new options for the[/color]
> remaining[color=green]
> > months.
> >
> > Stu
> >
> > "Francois" <google@francoissachs.nl> wrote[color=darkred]
> > > 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>[/color]
> >
> >[/color]
>
>[/color]
|  |
Similar JavaScript / Ajax / DHTML bytes | | |  /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,449 network members.
|
