Dynamically adding drop down list to a jsp page

Question

I have inserted my code here.What i am trying to do is when the user selects an option in Phase menu then the activity menu should be dynamically produced.This code is running fine but when I select an option from phase menu it shows error at onchange function G() is not defined.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import ="org.indresh.javanet.Employee"
    import="org.indresh.javanet.Database" import="org.indresh.javanet.MySqlConnector"
    import="java.util.HashMap" import="java.util.ArrayList" import="java.util.HashSet"
    import="java.util.Arrays" import="java.util.Iterator" import="java.util.Set"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
  var create=0;
  function G(){
   if (create == 1) {
                removeDrop();
            }
   
   var a=document.getElementById('phase1');
   
   var wheretoput=document.getElementById('acc');
   var createselect=document.createElement('select');
   createselect.setAttribute('name',"Activity");
   wheretoput.appendChild(createselect);
   ArrayList<String> act=new ArrayList<String>();
   act=actpha.get(a);
   
   for(var i=0;i<act.length;i++){
    var createoption=document.createElement('option');
    createoption.text=act.get(i);
    createoption.value=act.get(i);
    createselect.add(createoption,createselect.options[null]);
    }
    create = 1; 
  }
  function removeDrop() {
            var d = document.getElementById('acc');

            var oldmenu = document.getElementByName('Activity');

            d.removeChild(oldmenu);
        }
  function timesheetrecorded(){
   alert("Your TimeSheet has been recorded");
  }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <meta charset="UTF-8">
<title>Employee TimeLine</title>
<meta name="description" content="Description of your site goes here">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  
</head>
<body>
<%Employee e=(Employee)session.getAttribute("Employee"); 
  String[][] phaseactivity;
  Boolean temp=(Boolean)session.getAttribute("Manager");
  int i;
  ArrayList<String> pid=new ArrayList<String>();
  Database db=new Database();
  MySqlConnector scon=new MySqlConnector();
  HashMap<String,String> pr=new HashMap<String,String>();
  pr=db.getProjects(scon);
  pid=db.getAllProjectID(scon);
  HashMap<String,ArrayList<String>> actpha=new HashMap<String,ArrayList<String>>();
  actpha=db.getphaseactivity(scon);
  Set<String> phases=new HashSet<String>();
  phases=actpha.keySet();
  ArrayList<String> ph=new ArrayList<String>();
  Iterator it=phases.iterator();
  while(it.hasNext()){
   ph.add((String)it.next());
  }
  %> 
<div class="main-out">
<div class="main">
<div class="page">
<div class="top">
<div class="header">
<div class="header-top">
<h1><span>Drivedge</span></h1>
<p>Call Us: +91 (0)20 65231515.</p>
<div class="namename">
<p>Hello <%=e.getEmployeeName() %></p></div>
</div>
</div>
<div class="topmenu">
<ul>
  <li><%if(temp){%><a href="AddEmployeeToProject.jsp"><button type="button">Add Employees to your Project</button></a><%} %>
  <a href="logout.jsp"><button type="button">LogOut</button></a></li>
</ul>
</div>
<div class="header-img">

</div>
</div>
<div class="content">
<div class="content-left">
<div class="row1">


</div>
<div class="row2">

<form name="form1" action="timesheet" method="get" onSubmit="timesheetrecorded()">
  <div Class="project">
  Select Project:<select name="Project">
  <option value="">--</option>
   <%for(i=0;i<pr.size();i++){%>
   <option value="<%=pid.get(i)%>"><%=pr.get(pid.get(i)) %></option><%} %>
  </select></div>
  <div class="phase">
  Select Phase:<select name="Phase" id="phase1" onchange="G()">
  <option value="">--</option>
  <%for(String p:ph){%>
   <option value="<%=p%>"><%=p %></option><%} %>
  </select></div>
  <div class="activity" id="acc">
  Activity:</div>
  <div class="date">Date:<input type="date" name="date" format="yyyymmdd"/></div>
  <div class="time">
  Time Devoted(Hrs):<input type="text" name="time"/></div>
  <div class="submit2">
  <input type="submit" name="Submit" onclick="timesheetrecorded()"/></div>
  
 </form>

</div>
</div>
<div class="content-right">

</div>
</div>
</div>
<div class="bottom">

</div>
</div>
</div>
</body>
</html>

ok. So what should I do to create a dynamic drop down menu in jsp file? — INDRESH KHANDELWAL, Jun 13 '16 at 06:20
just advice put your JS code before
sometimes If Js code in the header, then the elements they are attempting to access might not exist yet. why you are using JS code what 's your goal ? — Taha, Jun 13 '16 at 10:54

score 0 · Answer 1 · edited May 23 '17 at 12:15

I think this link may help you

Reading a JSP variable from JavaScript

Answer copied from that question

<html> 
<head>
<script language="javascript"> 

function access(){ 
  <% String str="Hello World"; %>
   var s="<%=str%>"; 
   alert(s); 
} 

</script> 
</head> 

<body onload="access()"> 
</body> 

</html>

Get your ArrayList into any jSP variable

<%=ArrayList<String> act=new ArrayList<String>();
            act=actpha.get(a); %>

After that use that variable into JS

 var jsact="<%=act%>";

from there your code work fine. This code may not perfect but it may help you.

Dynamically adding drop down list to a jsp page

1 Answers1