JSP Dependent Drop Down Menu

Ads
 

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`));

Ads









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
drop down menu
drop down menu  drop down menu using html
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  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
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
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 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 '<
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
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 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
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>
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
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
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 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
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 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
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
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
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
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
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

Ads