i'm trying to write code when user which selects specific option from Dropdown menu then after selecting specific option. value gets printed next to dropdown menu. That value is already present in the database only need to retrieve it according to the dropdown menu. e.g.- if user select TYPE A option from select option then value gets printed according to TYPE A i.e. Table "type_a" column value needs to print from database. i'm trying to create dynamic select option when user select specific type in it then value must get printed according to it. Please refer my code from comment section.enter image description here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<h1>LOGIN ATTEND</h1>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var u = window.location.href;
var ul = new URL(u);
var c = ul.searchParams.get("uid");
//console.log(c);
alert(c);//to check c value
var request;
function sendInfo(str)//str will have value selected from dropdown list
{
//attaching this value in url
var url="process.jsp?val="+str+"&emp_id="+c;
if(window.XMLHttpRequest)
{
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange= function() {
if(this.readyState === 4 && this.status === 200) {
document.getElementById("amit").innerHTML = this.responseText;
}
};
request.open("GET",url,true);
request.send();
}
function getInfo()
{
if(request.readyState===4)
{
var val=request.responseText;
document.getElementById('amit').innerHTML=val;
}
}
function insertDropDopwns()
{
var from_date = document.getElementById("datepicker").value;
var to_date = document.getElementById("datepickerto").value;
var date1 = new Date(from_date);
var date2 = new Date(to_date);
//var = new Date();
//var date2 = new Date();
if(from_date === null & to_date === null)
{
}
else
{
var total = 1000*60*60*24;
var date1_ms = date1.getTime();
// console.log(date1_ms);
var date2_ms = date2.getTime();
// date1 = from_date.getTime();
// date2 = to_date.getTime();
var difference_ms = ((date2_ms - date1_ms)/total)+1;
// console.log(date1_ms);
// console.log(date2_ms);
console.log("difference in date "+difference_ms);
// the it should print the value of type a from the database. i have created one table(which is database) in that three columns are present type_a,type_b,type_c. So now i want if user select specific option from select option box then according to option value must be retrived and get print next to that option box. i have one value but it's not printing selected value and it's printing only one value. i want all the values get print next option box when user select specific type from option box.
for(var i = 0; i<difference_ms;i++)
{
$('<div><select class="selected-meal-type" onchange ="sendInfo(this.value);"><option value="TYPE A">TYPE A</option><option value="TYPE B">TYPE B</option><option value="TYPE C">TYPE C</option></select> <span id="amit" /></span></div><br>').appendTo('#container');
}
}
}
function getSelectedOptions()
{
var values = [];
var choice1 = "TYPE A";
var choice2 = "TYPE B";
var choice3 = "TYPE C";
$('.selected-meal-type option:selected').each(function(){
values.push($(this).val());
});
console.log(values);
for(var i = 0; i<values.length; i++)
{
var opt = values[i];
//console.log(opt);
if(values[i] === choice1)
{
console.log("WE ARE IN BLOCK A");
}
else if(values[i] === choice2)
{
console.log("WE ARE IN BLOCK B");
}
else if(values[i] === choice3)
{
console.log("WE ARE IN BLOCK C");
}
}
}
$( function() {
$( "#datepicker" ).datepicker();
} );
$( function() {
$( "#datepickerto" ).datepicker();
} );
function show()
{
var from_date = document.getElementById("datepicker").value;
var to_date = document.getElementById("datepickerto").value;
var date1 = new Date(from_date);
var date2 = new Date(to_date);
//var = new Date();
//var date2 = new Date();
if(from_date === null & to_date === null)
{
}
else
{
var total = 1000*60*60*24;
var date1_ms = date1.getTime();
// console.log(date1_ms);
var date2_ms = date2.getTime();
// date1 = from_date.getTime();
// date2 = to_date.getTime();
var difference_ms = (date2_ms - date1_ms)/total;
// console.log(date1_ms);
// console.log(date2_ms);
console.log("difference in date "+difference_ms);
var input1 = parseInt(document.getElementById("input1").value);
var input2 = parseInt(document.getElementById("input2").value);
var totaldays = input1 + input2;
// console.log(input1);
// console.log(input2);
console.log("total days "+totaldays);
if(difference_ms >= totaldays)
{
console.log("LAEAVE GRANTED");
alert("LAEAVE GRANTED");
}
else
{
console.log("NO LAEAVE");
alert("NO LAEAVE");
return false;
}
}
}
</script>
</head>
<body>
<center><td>FROM <input type="text" id="datepicker" name="fromdate"> TO
<input type="text" id="datepickerto" name="todate"></td>
<button onclick="insertDropDopwns()">Insert Selectors</button><br><br>
<br><br>
<div id="container"></div>
<div id="amit"></div>
<br><br><br><br><br><br><br>
</body>
</html>
<!-- --------------------------------Process.jsp----------------------------------- -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<%
String s = request.getParameter("val");
String emp = request.getParameter("emp_id");
String array = request.getParameter("para");
//String[] a = ${fn:split(array, ',');};;
//String[] arr = array.split(" ");
// String arr[];
// arr = new String[40];
/* for(int i=0;i<arr.length;i++)
{
arr[i] = request.getParameter("para");
}
out.println(arr); */
if(s==null || s.trim().equals("")){
// out.print("Please enter id");
}else{
int id=Integer.parseInt(emp);
// out.println(id);
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/registerdb", "root", "");
PreparedStatement ps = con.prepareStatement("select rem_type_a from request where emp_id=?");
ps.setInt(1,id);
PreparedStatement ps1 = con.prepareStatement("select rem_type_b from request where emp_id=?");
ps1.setInt(2,id);
PreparedStatement ps2 = con.prepareStatement("select rem_type_c from request where emp_id=?");
ps1.setInt(3,id);
ResultSet rs = ps.executeQuery();
ResultSet rs1 = ps1.executeQuery();
ResultSet rs2 = ps2.executeQuery();
// String stArray = "";
// stArray = request.getParameter("ARRAY");
// out.println(a);
if(rs.next())
{
out.print(rs.getDouble("rem_type_a"));
}
else if(rs1.next())
{
out.print(rs1.getDouble("rem_type_b"));
}
else if(rs2.next())
{
out.print(rs2.getDouble("rem_type_c"));
}
con.close();
}catch(Exception e){e.printStackTrace();}
}
%>
</body>
</html>When you print your select box,you can passed parameter onChange="sendInfo(this.value);" function like below :
$('<div>
<!--adding onchange and passing selected value to it-->
<select class="selected-meal-type" onchange ="sendInfo(this.value);">
<option value="TYPE A">TYPE A</option>
<option value="TYPE B">TYPE B</option>
<option value="TYPE C">TYPE C</option>
</select> <span id="amit" /></span>
</div>
<br>').appendTo('#container');
Now in your sendInfo function do like below :
function sendInfo(str)//str will have value selected from dropdown list
{
//attaching this value in url
var url="process.jsp?val="+str;
if(window.XMLHttpRequest)
{
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange= function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("amit").innerHTML = this.responseText;
}
};
request.open("GET",url,true);
request.send();
}
Also don't forget to add div with id amit.Now ,if you select Type B then, val will have value TypeB ,use this in your select query and sent result back to your jsp page.
来源：https://stackoverflow.com/questions/55918875/how-print-record-from-database-when-user-select-options-from-dropdown-menu-dyna