Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 355
  • Last Modified:

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.




0
pat5
Asked:
pat5
  • 6
  • 3
1 Solution
 
cheekycjCommented:
here is a good basic how to on what you want to accomplish:
http://www.xs4all.nl/~ppk/js/options.html

CJ
0
 
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
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!

 
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

Featured Post

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!

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now