?
Solved

Dynamic select list

Posted on 2003-03-02
9
Medium Priority
?
347 Views
Last Modified: 2008-03-17
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.




0
Comment
Question by:pat5
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 19

Accepted Solution

by:
cheekycj earned 80 total points
ID: 8058415
here is a good basic how to on what you want to accomplish:
http://www.xs4all.nl/~ppk/js/options.html

CJ
0
 

Author Comment

by:pat5
ID: 8059780
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
 
LVL 19

Expert Comment

by:cheekycj
ID: 8059852
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:pat5
ID: 8061043
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
 
LVL 19

Expert Comment

by:cheekycj
ID: 8065362
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
 

Author Comment

by:pat5
ID: 8066740
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
 
LVL 19

Expert Comment

by:cheekycj
ID: 8066901
so if I select a year in 1 that year should be copied over to the second list?

CJ
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 8066925
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
 
LVL 19

Expert Comment

by:cheekycj
ID: 8073138
Did u get it to work?

CJ
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An introduction to the wonderful sport of Scam Baiting.  Learn how to help fight scammers by beating them at their own game. This great pass time helps the world, while providing an endless source of entertainment. Enjoy!
Active Directory can easily get cluttered with unused service, user and computer accounts. In this article, I will show you the way I like to implement ADCleanup..
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question