JSP Dependent Drop Down Menu

JSP Dependent Drop Down Menu

Hey Guy/Gals!

I need someone help to guide me in creating a drop down menu, where the first menu affects the second menu and it's selection. So in my database I have a category table that has a ID, parentID, and name. parentID is a FK to the PK ID within the same table. Can anyone please give me guidance or some links that may help me. I have been searching the interwebs for the past hour so I don't know how useful links will be to me, since I have literally searched everything. But any help would be nice.

I am guessing I will need to use JSP + AJAX to make this dynamic. Can anyone please help me soon?

<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

<html>
<head>
<title>SELECT Operation</title>
</head>
<body>

<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
     url="jdbc:mysql://uml.cs.uga.edu:3306/team6"
     user="team6"  password="overload"/>

<sql:query dataSource="${snapshot}" var="result">
    SELECT * FROM Category WHERE parentID IS NULL;
</sql:query>


<select>
<c:forEach var="row" items="${result.rows}">
<option value="${row.id}" id="parent_id">${row.name}</option>
</c:forEach>
</select>

<select>
<c:forEach var="row" items="${result.rows}">
<option value="${row.id}" id="parent_id">${row.name}</option>
</c:forEach>
</select>


</body>
</html>

How Category is setup (NOT THE EXACT SCRIPT):
CREATE TABLE Category
CREATE TABLE 'Category'(
    'ID' int(11) , NOT NULL, auto_increment,
    'parentID', int(111),
    'name', varchar(255), NOT NULL,
    PRIMARY KEY ('id')
);

Also 'parentID' is a FK to the PK 'ID'.

Thanks ahead of time for any help!

View Answers

December 3, 2012 at 5:14 PM

The given code will help you to create a dependent dropdown box.

1)country.jsp:

<%@page import="java.sql.*"%>
 <html>
      <head>  
      <script language="javascript" type="text/javascript">  
      var xmlHttp  
      var xmlHttp
      function showState(str){
      xmlHttp=GetXmlHttpObject();
      if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
      var url="state.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }

      function stateChange(){   
      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("state").innerHTML=xmlHttp.responseText   
      }   
      }

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
      </script>  
      </head>  
      <body>  
      <select name='country' onchange="showState(this.value)">  
      <option value="none">Select</option>  
    <%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from country");
 while(rs.next()){
     %>
      <option value="<%=rs.getString(1)%>"><%=rs.getString(2)%></option>  
      <%
 }
     %>
      </select>  
      <br>  
      <div id='state'>  
      <select name='state' >  
      <option value='-1'></option>  
      </select>  
      </div>  
      </body> 
      </html>

2)state.jsp:

 <%@page import="java.sql.*"%>
<%
String country=request.getParameter("count");  
 String buffer="<select name='state' ><option value='-1'>Select</option>";  
 try{
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from state where countryid='"+country+"' ");  
   while(rs.next()){
   buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(3)+"</option>";  
   }  
 buffer=buffer+"</select>";  
 response.getWriter().println(buffer); 
 }
 catch(Exception e){
     System.out.println(e);
 }

 %>

For the above code, we have created two database tables:

CREATE TABLE `country` (                                 
           `countryid` bigint(255) NOT NULL auto_increment,       
           `countryname` varchar(255) default NULL,               
           PRIMARY KEY  (`countryid`)); 



CREATE TABLE `state` (                                   
          `stateid` bigint(255) NOT NULL auto_increment,         
          `countryid` int(255) default NULL,                     
          `state` varchar(255) default NULL,                     
          PRIMARY KEY  (`stateid`));









Related Tutorials/Questions & Answers:
JSP Dependent Drop Down Menu
JSP Dependent Drop Down Menu  Hey Guy/Gals! I need someone help to guide me in creating a drop down menu, where the first menu affects the second menu and it's selection. So in my database I have a category table that has a ID
dependent drop down box - JSP-Servlet
dependent drop down box  haloo sir Please give me the solution how to extract data from dependent drop down box with page refresh...; window.location.replace("http://localhost:8080/examples/jsp/dependentDropdown.jsp?id="+cid+"&&value
Advertisements
Dependent drop down list
Dependent drop down list  hi,i am trying to design a form on which 2 dependent drop down list is used my code is successful but when i select class from first drop down list all the data get lossed means the value entered
drop down menu
drop down menu  drop down menu using html
Drop down menu
Drop down menu  I have drop down list of some 14 links which links to the table,If i click each link the table should display below the link and again if i click the link the table should not appear. please help me
Drop down menu
Drop down menu  I have created a drop down list of links which links to a table but if i click the link the table display in the other page i want to display it in the same page.Please tell me the solution
html menu button drop down
html menu button drop down  How to create a menu button in HTML?   <select id="category"> <option value="1">One</option> <option value="2">Two</option> </select> <select id
jQuery Drop Down Menu
jQuery Drop Down Menu       In this JQuery tutorial we will develop a program  to make Drop Down menuADS_TO_REPLACE_1 Steps to develop the Drop Down menu . Step 1:  ADS
How to create a dependent drop down list using [Apache POI]
How to create a dependent drop down list using [Apache POI]  Here I..., and "rice, curd, milk" items will appear in the dependent drop down list in cell.... In that two drop down list are there. Want to create a drop down list that depends
How to create a dependent drop down list using [Apache POI]
How to create a dependent drop down list using [Apache POI]  Here I..., and "rice, curd, milk" items will appear in the dependent drop down list in cell.... In that two drop down list are there. Want to create a drop down list that depends
jsp drop down without refresh - JSP-Servlet
jsp drop down without refresh  Sir I have tried two depenedent jsp dropdown in jsp page,But the probleam is when i select first drop down its... jsp same probleam also arise. Please tell me how to use the drop down without
want to insert values in drop down menu in struts1.3
want to insert values in drop down menu in struts1.3  I am using DynaValidatorForm.please help me with inserting values in color drop down menu. I...; <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:fmt="http
drop down box - JSP-Servlet
drop down box  when i enter some letter in the input box,the corresponding words of that particular letter must be displayed below as a list from the data base in the same input box as drop down. Thanks&Regards, VijayaBabu.M
jsp drop down-- select Option
jsp drop down-- select Option  how to get drop down populated dynamically   Hi Friend, Create table country(country_id,country) in database and try the following code:ADS_TO_REPLACE_1 <%@page import="java.sql.
jQuery Simple Drop Down Menu
jQuery Simple Drop Down Menu In this section, you will learn how to develop a simple drop down menu using jQuery. To develop a drop down menu we put... color="green"> Hover mouse on any menu item to drop down
creation of drop down menu using ajax in java - Ajax
creation of drop down menu using ajax in java  Hi, Here I want to create a drop down menu using ajax in ofbiz framework. I want to fetch the data from database.I got examples using asp.net and php but I am not getting
Drop-down text selection in jsp/html
Drop-down text selection in jsp/html  Hi, I am trying to create JSP page where I have two drop-downs. There are two-sets of data - First set.... Now the first dropdown will have all the values. The second drop-down depends upon
Add values of drop down menu( select option) to mysql table
Add values of drop down menu( select option) to mysql table   Here is my code <?php echo $row['valveName'].'<td>'.$row['valveId'].'<td>'; echo '<select name="onoff">'; echo '<
displaying section in the jsp based on the sected value in drop down - Java Beginners
displaying section in the jsp based on the sected value in drop down   Hi friend, i have one problem in my jsp. i.e i have to display section on the jsp based on the selected value in the drop down list using java script code
retrive the data from access database to drop down list box in jsp
retrive the data from access database to drop down list box in jsp  hai, im new to jsp now im using the jsp along with access database.in table i load all the data's i need to retrive the data from database to dropdown list box
How to send the data selected from drop down menu from html page to sql 2005 database.
How to send the data selected from drop down menu from html page to sql 2005 database.  Dear Sir, If I want to save the information provided by user from html drop down menu such as check-in date for hotel reservation
drop down
drop down  how can i add data from choice/dropdown component of java awt to myaql table
Drop Down
Drop Down  How to insert date into database using dropdown like facebook
jsp login code ... when username , drop down box and password is correct
jsp login code ... when username , drop down box and password is correct  i need a jsp code for login.... when username password and dropdown box value is correct.... the drop down box values should be retrieved from database
jsp code for a drop down box to retrive value from database
jsp code for a drop down box to retrive value from database  my project needs to get the value from database in to the drop down box..... pls give me code for that ..... tan q   1)login.jsp: <html> <script>
dynamic drop down list
dynamic drop down list  I want to create 2 drop down list, where it takes value from database and the two list are dependent..means if I select... on the value chosen from the previous. want code in javascript and jsp, Can you help
How to pass parameter through drop down list using session management in jsp??
How to pass parameter through drop down list using session management in jsp??  How to pass parameter through drop down list in the URL and access it on same jsp page using session management
drop down list in Struts
drop down list in Struts  How to create a drop down list in Struts
drop down php mysql - PHP
drop down php mysql  PHP Script required to show the similar drop down item in each menu without refreshing the page. Is it possible if yes how
how to set a value of dynamic number of drop down lists on a jsp page and access it value on another jsp page
how to set a value of dynamic number of drop down lists on a jsp page... number of drop down lists(depending upon number of books in that category) on jsp... one setting values of drop down lists and other one accessing it in this jsp
Drop Down reload in IE
Drop Down reload in IE  Hi i was using two drop down box..One for Displaying date followed by another for Dispalying Month..If i Select/Change Month from the 2nd drop down then the 1st drop down ( which is date) automatically
Pls provide me jsp code to get values in drop down list from another table's field....
Pls provide me jsp code to get values in drop down list from another table's field....  my project has customer registration and company registration... in customer registration page and should be shown in drop down box in front end
Drop Down Box
Drop Down Box  In a Drop Down box I want to show the user All the Country In the World. And when he type A-z,then each of the type Show those country which start with those word. Like I For-India
validation for drop down list
validation for drop down list  Hi all I have a form, it contain 12 drop down list. Each drop down has 1 to 5 values,i need to validate this form. the following condition should be true. 1.you can choose only 3 times 5 value. 2
Login With Drop Down
Login With Drop Down   Hi all, I am doing a project using JSP. My... a drop down list consisting of Customs and Accounts. I have user accounts of both the departments. Now, my intention is to select the department from the drop down
dynamic drop down
into the designation drop down (use jsp+javascript+servlet) reply soon   1...dynamic drop down   I have created 2 drop downs in jsp.1 for department and other for its related designation.that means if I select a department
Ajax drop down and textbox
Ajax drop down and textbox  hie frnds I have a dropdown menu in the 3 options(1,2,3) are there if i choose 1 then I should get 1 text box if i select... menu consisting of options 1,2,3. When the user select any option from
how to retrieve the id value itself from the access database to drop down listbox in jsp
how to retrieve the id value itself from the access database to drop down listbox in jsp  how to retrieves the id which is an int datatype, from access database to drop down list box in jsp...plz send the code for that.....plz
Get values in drop down list
Get values in drop down list  Pls provide me jsp code to get values in drop down list from another table's field. my project has customer... in drop down box in front end..... pls provide me code.. thanx
Drop down combos
Drop down combos  Hi.. How to write a javascript for linked combo dropdown boxes.   <html> <h2>ComboBox</h2> <script language="javascript"> var arr = new Array(); arr[0] = new Array("-select
jsp- database dependent dropdown list
jsp- database dependent dropdown list   i want 2 dropdown list 1- CLASS 2-SECTION both are should come from database. and if i select a class... respective to that class from database. please help by providing the code in jsp
store values of drop down list box in database
store values of drop down list box in database  how to store values of drop down list box in oracle database in jsp?I have information inserting form where i have date of birth as drop down list box
Dependant & dynamic drop down list
Dependant & dynamic drop down list  I don't know this should be in this or AJAX forum. I have one dynamic drop down list from data base (working... on the values selected by user in first drop down list. How to achieve this ?   
Menu s - JSP-Servlet
Menu s  How to create menubar & menus & submenus in jsp
Drop down list from database
Drop down list from database  Hi, Can I know how do we get the drop down list from database? Eg: select country--select state--select district--so on.   1)country.jsp: <%@page import="java.sql.*"%> <html>
Dynamic Dropdown Menu
Dynamic Dropdown Menu       Put records from your database in a drop down menu/list box. You can apply..._TO_REPLACE_5 <title>Dynamic Drop Down List</title> </head> <
drag n drop - JSP-Servlet
drag n drop  I want to implement drag n drop functionality for simple HTML/JSP without using applet,flash or any heavy components.using browse button... using drag and drop mode.when user drag n drop file then display the complete path
How do i retain values in the drop down - Struts
How do i retain values in the drop down  Hi, I have a jsp page... with the drop down. My problem is whenever i do this the values in the drop down... in the drop
Drop down for search textbox like google search
Drop down for search textbox like google search  I want drop down like google search (ie, when we type one letter then the word start with that are displayed). when the drop down list appear, then we can select one of word as our
dynamic creation of multiple drop-down menus
dynamic creation of multiple drop-down menus  can anybody plz help me in coding for dynamic creation of multiple drop-down menus in a webpage using ajax/js/html/css

Ads