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.




pat5Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cheekycjCommented:
here is a good basic how to on what you want to accomplish:
http://www.xs4all.nl/~ppk/js/options.html

CJ
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
pat5Author Commented:
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.
0
cheekycjCommented:
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
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

pat5Author Commented:
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.  
0
cheekycjCommented:
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
0
pat5Author Commented:
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.
0
cheekycjCommented:
so if I select a year in 1 that year should be copied over to the second list?

CJ
0
cheekycjCommented:
if that is what you want try:
<script language="JavaScript"><!--
function populateSecondYear() {
    for (var Current=0;Current < document.formName.firstYear.options.length;Current++) {
        if (document.formName.firstYear.options[Current].selected) {
            var defaultSelected = true, selected = true;
            var optionName = new Option(document.formName.firstYear.options[Current].value, document.formName.firstYear.options[Current].text, defaultSelected, selected)
            if (replacedfirst)
                var length = document.formName.secondYear.length;
            else
                var length = 0;
            document.formName.secondYear.options[length] = optionName;
            replacedfirst = true;
        }
    }
}

var replacedfirst = false;
//--></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
0
cheekycjCommented:
Did u get it to work?

CJ
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JSP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.