asked on

Dynamic Drop Down Box

Hi
This is my situation.I have to have 2 drop down boxes.First one is the Root directory name and according to the root directory selected the second box should display all the subdirectories in the root directory.This should be done in JSP.I created a java program which return the subdirectory information given a root directory.I am trying to call this program using scriptlets in JSP but i am not able to pass the root directory that is selected as the argument to the method in the javaprogram .It says it cannot find the symbol because it is in the scriptlet part of the JSP.PLease let me know if there is any way to do this.Explanation with code is highly appreciated....

archrajan

http://fairfieldconsulting.com/js_multipleSelects.asp

archrajan

you can do dynamic drop down boxes with pure javascript as well

see this chained select example

<html>
<head>
</head>
<body>
<script>
function getcountry()
{
document.getElementById('country').length = null
if(document.getElementById('countries').options[document.getElementById('countries').selectedIndex].value == "usa")
{
var a = document.getElementById('country').length

var opt = new Option('NEW YORK','NEW YORK','NEW YORK')
var opt1 = new Option('WASHINGTON','WASHINGTON','WASHINGTON')
var opt2 = new Option('LOS ANGELES','LOS ANGELES','LOS ANGELES')
document.getElementById('country').options[0] = opt;
document.getElementById('country').options[1] = opt1;
document.getElementById('country').options[2] = opt2;
}
if(document.getElementById('countries').options[document.getElementById('countries').selectedIndex].value == "uk")
{
var a = document.getElementById('country').length

var opt = new Option('LONDON','LONDON','LONDON')
var opt1 = new Option('BRIMINGHAM','BRIMINGHAM','BRIMINGHAM')
var opt2 = new Option('MANCHESTER','MANCHESTER','MANCHESTER')

document.getElementById('country').options[0] = opt;
document.getElementById('country').options[1] = opt1;
document.getElementById('country').options[2] = opt2;

}
}
</SCRIPT>
<body onload = "getcountry()">

<form>

<select id="countries" name="countries" onchange="getcountry()">
<option value="usa">USA</option>
<option value="uk">UK</option>

</select>

<select id="country" name="country">

</select>

</form>

</body>
</html>

archrajan

if the values can be in the form of an array then can also be populated intothe select box vis javascript

koppcha

ASKER

Hi
As i said i will get the values from the java code i have written but not the hard coded ones so .In your code you should get city names from a java class which we can access through scriptlets but not the default ones.Can you modify your code accordingly...
Thanks

archrajan

hey just check this out http://www.rgagnon.com/javadetails/java-0183.html
there is a way to read java array from javascript... but its not very effective as it wud lead to some browser to crash...
the best option wud be
if u cud pass the java array as a hidden field in the form.. javascript can access it

koppcha

ASKER

Hi
I checked it out.It is the case when you have your program and javascript are in the same file moreover it does not look efficient as you said..it could only work on some particular browers.In worst case I am ready to chage the logic i was using to get the required compatablitity and efficiency..
Thanks for trying.

archrajan

Hey check this out, if u can have the array from java class to be in the form something like the below wud help

credit:netgroove
<html>
<head>
<script>
var secSel = new Array();
secSel[0] = ["- select first-"];
secSel[1] = ["opt1", "opt2", "opt3", "opt4"];
secSel[2] = ["Aopt", "Bopt", "Copt", "Dopt"];
secSel[3] = ["1", "2", "3", "4", "5", "6", "7"];
function newSel(selIdx, selName){
opt = document.forms[0][selName].options;
opt.length = 0;
for(i=0;i<secSel[selIdx].length;i++){
newOpt = secSel[selIdx][i];
opt[opt.length] = new Option(newOpt, newOpt, true, true);
}
document.forms[0][selName].selectedIndex = 0;
}
</script>
<body onLoad="newSel(0,'dynSel')">
<form>
<select onChange="newSel(this.selectedIndex,'dynSel')">
<option>-choose one-
<option>Opt Num
<option>Char Opt
<option>Numbers
</select>
<select name="dynSel">
</select>
</form>
</body>
</html>

koppcha

ASKER

The code i am writing is in JSP... not in the JAVA program so i have to use scriptlets to access the methods in the java program.I was not pass arguments from my javascript to that class dynamically because by that time that JSP is already compiled so i think i have to do something like calling the program with action in javascript and then reloaded it again with the values that i get from the class but i am not sure how to do this....

archrajan

<select onchange = "document.formname.action = 'ur url'; document.formname.submit();">

</select>

this will change ur form action and submit the form onchange of the selectbox

koppcha

ASKER

Ok then when i reload how would get the values that are previously selected anyidea ?

archrajan

when u reload u want to know which option was selected in the selectbox??

u can get the selected value in javascript by

document.formname.selboxname.options[document.formname.selboxname.selectedIndex].value

koppcha

ASKER

Ohh Wouldn't it erase the previous selection when we reload?

archrajan

this is to do only with JSP

This is what we could do. Add a onChange event to the first dropdown. When a item is selected in dropdown box1 we submit the form to the servlet class which could retrieve the root directory selected in the dropdown box1. Now use his Java classes to get the list of subdirectories and put the list as an ArrayList and add the ArrayList in the request or the session object as

request.setAttribute("list", list);
or
HttpSession session = request.getSession();
session.setAttribute("list", list);
Note that the above code should be done in the servlet. Then at the end of this the servlet should dispatch the request back to the JSP page using
getServletContext().getRequestDispatcher(<jsp page Name in "">).forward(request, response);

In the JSP page, we could then build the second dropdown list as
<select name="dropdownbox2">
<%
java.util.ArrayList list = (java.util.ArrayList) request.getAttribute("list");
if(list == null) // this is to handle the first time page is invoked. We would not have selected any root directory at that time.
{
%>
<option name="dummy"> </option>
<%}
else
{
for(int i = 0; i < list.size(); i++)
{%>
<option name="opt<%=i%>"><%=(String) list.get(i)%></option>
<%}
}%>
</select>

koppcha

ASKER

I appreciate your help ...the code you have sent makes sense of i will start implementing...Thanks again for the help.I will let you know soon what happened ..this may take some time so take rest ...you have been a great help...

koppcha

ASKER

Hi archrajan
I am successful to some extent.I did chages to my logic but the basic idea is yours...The second drop box is changing according to the selection in the first drop box but ..after that the selected in the root directory is lost ...it is set to default again...let me know what i have to do according to the code you have given above..

ASKER CERTIFIED SOLUTION

archrajan

membership

This solution is only available to members.

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

Start Free Trial

koppcha

ASKER

Hi archrajan
Great..You helped me a lot.Yeah i think this will work...I can try it tomorrow only i will let you once once it is done...
This is what i have done i writing this hope it could help some one else with the same kind of issue.But i basic idea is yours...Infact credit goes to you..

1>I javascript varibale which contians the root direcotry that is selected is sent to the servlet through URL rewriting ...like
document.myform.action="rootServlet?RootDirectory="+rootdirectory; where rootdirectory is the javascript variable that is set to the selected option.

2>In the RootDirectory servlet i calculated the subdirectories and set the request object like...request.setattribute("DirectoryList",DirectoryList) where DirectoryList is the ArrayList with all the subdirectories.

3>Forwarded to the JSP page the request object .

4>After that the story is same like what archrajan has mentioned...

Thanks Once again.I will let you know the output tomorrow

koppcha

ASKER

Sorry for the typos..I did not notice :)

archrajan

good work....great!!! :)

koppcha

ASKER

Nothing New Just Corrected the typos...
Hi archrajan
Great..You helped me a lot.Yeah i think this will work...I can try it tomorrow only i will let you know once it is done....
This is what i have done i am writing this hoping it could help some one else with the same kind of issue.But i basic idea is yours...Infact credit goes to you..

1>The javascript varibale which contians the root direcotry that has been selected is sent to the servlet through URL rewriting ...like document.myform.action="rootServlet?RootDirectory="+rootdirectory; where rootdirectory is the javascript variable that is set to the selected option.

2>In the RootDirectory servlet i calculated the subdirectories and set the request object like...request.setattribute("DirectoryList",DirectoryList) where DirectoryList is the ArrayList with all the subdirectories

3>Forward the request object to the JSP page

4>After that the story is same like what archrajan has mentioned...

Thanks Once again.I will let you know the output tomorrow

koppcha

ASKER

Hi archrajan

I tried it out and it worked out with little changes....
Changes done are

1>in the init() function i deleted the statement "var dropdown1 = document.forms[0].dropdown1;" and where ever you have written dropdown1 i replaced it with document.form[0].dropdown( It was not working like so i chaged it like this and it worked...)

2><body onLoad="init()" > instead of onfiltered

Atlast it was successful.Thankyou once again for your help.You will get your points.

archrajan

Thanks... For the grade...

Happy Newyear!

koppcha

ASKER

You deserve it..
Happy Newyear Archana..:)

archrajan

Thanks again!

"Let the Newyear be a good begining for thousands of people who were devasted by TSUNAMI"....