How to Populate DropDown Menu by selecting another DropDown Menu

Replies

• 

  deepu11111111

  I am trying
• 

  Manish Goyal

  This is very simple job
  You just have to use ajax for doing this or if you want to do this in Javascript only then you can do this
  
  Add a onChange Event on Semester drop down
  
  and check for ID of semester and append new Options to subjects drop down accordingly
• 

  TheV

  I don't know Ajax at all... 😔 Is there is any nice site to learn from..?
• 

  Manish Goyal

  Above code will help you in implementing it, there might be some syntax error in this code , as i have not checked it, use firebug in mozilla for checking it
  Now Coming to explanation of its working
  
  1:- Now whenever you will select semester
  Jquery will capture onChange event and fire ajax to the server and will fetch corresponding subject for the that semester and returns the response
  Jquery will then parse that response in success function and fill the corresponding Subject Combo Box
  I hope you got an Idea , what i am saying , if you still need details explanation, then take help from google
  Just use following query
  Populate combo-box box dynamically on Change
  You will get thousands of search results
  
• 

  sookie

  Please check below example how it can be done through JavaScript. In order to get the values for Subjects drop down, you will have to hit the server once or either you can load them during page load itself as I have saved them by "comma separator".
  

  
  
  
  
  
  
  Drop Down 1: 
  Select
    Semester 1
    Semester 2
    Semester 3
    Semester 4
      Semester 5
    Semester 6
    Semester 7
    Semester 8
  
  
  
  
  Drop Down 2: Select
  
  
  

  Let me know if you want to go with Ajax approach.
• 

  TheV

  Actually I wanna do in this way...!!
  

  I want to fetch the values from the database and then assign it to the sub_select (dropdown menu). And the HTML codes are below..: ---
  

  
  
  
  Semester :
          
          
            -- Select --
            First
            Second
            Third
            Fourth
            Fiveth
            Sixth
            Seven
            Eight
          
          
      
  
            -- Select --
            Computer Science & Engineering
            Electronics & Communication
            Information Technology
            Food Technology
            Electrical Engineering
            Electronics & Intrumentation
          
  
            --Select--
   
          
  
  
  

• 

  TheV

  I am trying to do in this way but I am not even getting the alert massage .....
• 

  sookie

  TheV

  I am trying to do in this way but I am not even getting the alert massage .....

  I will correct your code[javascript method : PopulateSubjectMenu()] later but till that time check the JavaScript error in Fire-bug console or IE browser.As far as I know you cannot use JSP scriptlets in JavaScript until or unless it is expression.
  
  You will have to hit the DB using Ajax on change of drop down.
• 

  TheV

  sookie

  I will correct your code[javascript method : PopulateSubjectMenu()] later but till that time check the JavaScript error in Fire-bug console or IE browser.As far as I know you cannot use JSP scriptlets in JavaScript until or unless it is expression.
  
  You will have to hit the DB using Ajax on change of drop down.

  [INFO] 2012-04-10 11:10:58:840: coupons: warning: strange fullLink=undefined
  [INFO] 2012-04-10 11:10:58:840: coupons: warning: strange fullLink=undefined
  [INFO] 2012-04-10 11:10:58:840: coupons: warning: strange fullLink=undefined
  [INFO] 2012-04-10 11:10:58:840: coupons: warning: strange fullLink=undefined
  
  I am getting the above warning...!!
  So Ajax is the last option left . . !
• 

  sookie

  Nope you will get this error, the one I already told you cannot use "scriptlets" in JavaScript
  
• 

  TheV

  Ohh...! I think varies from browser to browser..!!
  So I have to do using AJAX only..!
• 

  sookie

  Here is your modified code
  
  

  
  
  
  
  Semester :
          
          
            -- Select --
            First
            Second
            Third
            Fourth
            Fiveth
            Sixth
            Seven
            Eight
          
          
  
  Department :
  
            -- Select --
            Computer Science & Engineering
            Electronics & Communication
            Information Technology
            Food Technology
            Electrical Engineering
            Electronics & Intrumentation
  
  
  
  
  
  

  Here is the code for "populateSubjects.jsp" which acts as servlet on ajax call
  

  <%@page import="java.sql.*"%>
  <%@page import="javax.sql.*"%>
  <%
              //open a database connection
              Connection conn = null;
              PreparedStatement stmt = null;
              ResultSet rs = null;
              try{
   
                String url = "jdbc:sqlserver://[DB Server IP]:[DB Server Port];";
                String driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
                String userName = "[Your Schema username]";
                String password =  [Your Schema pwd] ;
                String semVal=request.getParameter("semVal");
                String deptVal=request.getParameter("deptVal");
             
                Class.forName(driver).newInstance();
                conn = DriverManager.getConnection(url,userName,password);
             
                String s=[FONT=Consolas]"Select sub_code,sub_name from subject_details where semester ="+ [/FONT] semVal [FONT=Consolas]+" and department='"+ [/FONT] deptVal [FONT=Consolas]+"'"[/FONT];
                stmt=conn.prepareStatement(s);
                rs=stmt.executeQuery();
             
                out.print("
  Subjects : ");
                out.print("");
                out.print("--Select--");
                 
                while (rs.next()) {
                String  [SIZE=13px][FONT=Consolas]sub_code[/FONT][/SIZE]= rs.getString("[SIZE=13px][FONT=Consolas]sub_code[/FONT][/SIZE]");
                String  [SIZE=13px][FONT=Consolas]sub_name[/FONT][/SIZE] = rs.getString("[SIZE=13px][FONT=Consolas]sub_name[/FONT][/SIZE]");
                out.print(""+[SIZE=13px][FONT=Consolas]sub_name[/FONT][/SIZE]+"");           
                }
                out.print("");
               
               
              }catch(Exception e ){
                  out.print("
  The following exception was thrown:
  ");
              }finally{
                  try{if(rs!=null)rs.close();}catch(SQLException e2){/*noop*/}
                  try{if(stmt!=null)stmt.close();}catch(SQLException e2){/*noop*/}
                  try{if(conn!=null)conn.close();}catch(SQLException e2){/*noop*/}
              }
  %>

  In order to run the above files, Please deploy them in any web container or app server and change the DB connection details to that of yours. Let me know if any issues.