asked on

Dynamic select list

I have 2 date fields on my JSP page:

Begining Quarter Date:

<select size=1 name="bqdatemonth">
<option value="1">1</option>
<option value="4">4</option>
<option value="7">7</option>
<option value="10">10</option>
</select>

<select size=1 name="bqdateyear">
<option value="1970">1970</option>
<option value="1972">1972</option>
.............
...........
....

<option value="2003">2003</option>
..........
........
<option value="2010">2010</option>
</select>

2nd fields is Actual Date:
<select size=1 name="adatemonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select size=1 name="adateyear">
<option value="2003">2003</option>
</select>

So when from Ist select list 1 is selected 2nd select list should list 1, 2, 3 in it and when Ist select list 4 is selected 2nd select list should show 4, 5, 6 in it similarly when 7 is selected from Ist list 2nd list should show 4, 5, 6 and 10 is selected from Ist list 10,11,12 should show in 2nd select list. These are all on change of Ist , 2nd select list should change like this.

And the Year part of Ist select list when select some year say 2003, 2nd select list should show only that year 2003 in it, if 2001 is selected 2nd list should show only 2001 in it.
this i want to do it in JSP & Javascript, Please through some light on it, i really appreciate your help.
Thanks in advance.

ASKER CERTIFIED SOLUTION

cheekycj

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pat5

ASKER

thanks a lot CJ,

here is my code:
<html>
<head>
<title>Untitled</title>
<script>
var store = new Array();

store[1] = new Array(
'1',
'2',
'3');

store[4] = new Array(
'4',
'5',
'6');

store[7] = new Array(
'7',
'8',
'9');
store[10] = new Array(
'10',
'11',
'12');

function optionTestIt()
{
optionTest = true;
lgth = document.forms[0].second.options.length;
document.forms[0].second.options[lgth] = null;
if (document.forms[0].second.options[lgth]) optionTest = false;
}

function populate()
{
if (!optionTest) return;
var box = document.forms[0].first;
var number = box.options[box.selectedIndex].value;
if (!number) return;
var list = store[number];
var box2 = document.forms[0].second;
box2.options.length = 0;
for(i=0;i<list.length;i++)
{
box2.options[i] = new Option(list[i]);
}
}

</script>
</head>
<BODY onLoad="optionTestIt()">

<form action="adates1.jsp" method="post">
<SELECT SIZE=1 NAME="first" WIDTH=200 onChange="populate()">
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="7">7</OPTION>
<OPTION VALUE="10">10</OPTION>
</SELECT>
<SELECT SIZE=1 NAME="second" WIDTH=200 >
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<input type="Submit" name="" value="submit">
</form>

</body>
</html>

It works fine but how can i do it for editing the values, i mean the above code i am going to include in my jsp for add purpose if i want to retreive the same information from DB, i should retain the values first & it as to work same like for add screen it did for edit screen also, how could you do that ? If any idea please through some light on it, i really appreciate it.

Thanks in advance.

cheekycj

your code works good. Glad to see you got that working.

Now as far as using this from the DB. populate your JavaScript arrays with Data from the DB. and that should be it.

for the Edit screen.. you should retrieve the same values as the add screen just make the current value selected.

CJ

pat5

ASKER

Hi CJ, I am able to retrieve the same values from DB for Edit screen, but still i have a problem with Year part,

Ist DD list year part like:

<SELECT NAME="firstYear" size="1">
<%
SimpleDateFormat formatterDByy = new SimpleDateFormat ("yyyy");
Date currentDBYear = new Date();
String yearDBString = formatterDByy.format(currentDBYear);
String maxYearDB = yearDBString;
int L = Integer.parseInt(maxYearDB);
for (int I = 1970; I <= L + 10; ++I) {
if (yearDBString.equals(Integer.toString(I)))
{%>
<option value="<%=I%>" selected><%=I%></option>
<%}else{ %>
<option value="<%=I%>" ><%=I%></option>
<%}
}%>
</SELECT>

IInd DD list :

<SELECT SIZE=1 NAME="secondyear" >
<OPTION VALUE="2003">2003</OPTION>

</SELECT>

OnChange of Ist DD year list only that one year should be listed in the IInd DD year part list.
do you have any example code for it ?
thanks.

cheekycj

I am not sure what u are trying to do.

You have one list from 1970 to current year.

the second list is related to the first list how?

CJ

pat5

ASKER

Hi CJ,

It is a business logic really, client wants that.
Ist list from 1970....to....2010 on select of Ist list year 2nd list should have the same in it. that a logic.

thanks.

cheekycj

so if I select a year in 1 that year should be copied over to the second list?

CJ

cheekycj

if that is what you want try:
<script language="JavaScript"></script>

<form name="formName" onSubmit="return false;">
<SELECT NAME="firstYear" size="1" onChange="populateSecondYear();">
<OPTION VALUE="">Select a Year</OPTION>
<%
SimpleDateFormat formatterDByy = new SimpleDateFormat ("yyyy");
Date currentDBYear = new Date();
String yearDBString = formatterDByy.format(currentDBYear);
String maxYearDB = yearDBString;
int L = Integer.parseInt(maxYearDB);
for (int I = 1970; I <= L + 10; ++I) {
if (yearDBString.equals(Integer.toString(I)))
{%>
<option value="<%=I%>" selected><%=I%></option>
<%}else{ %>
<option value="<%=I%>" ><%=I%></option>
<%}
}%>
</SELECT>

IInd DD list :

<SELECT SIZE=1 NAME="secondYear" >
<OPTION VALUE=""></OPTION>
</SELECT>

</form>

CJ

cheekycj

Did u get it to work?

CJ