当用户从下拉菜单中选择选项时，如何从数据库打印记录?动态程序 [英] how print record from database when user select options from Dropdown menu? dynamic program
本文介绍了当用户从下拉菜单中选择选项时，如何从数据库打印记录?动态程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当用户从下拉菜单中选择特定选项，然后选择特定选项后，我正在尝试编写代码.值会显示在下拉菜单旁边.该值已存在于数据库中，只需要根据下拉菜单进行检索即可.例如-如果用户从选择选项中选择TYPE A选项，则根据TYPE A打印值，即需要从数据库中打印表"type_a"列值.我正在尝试在用户选择特定类型时创建动态选择选项，然后必须根据它打印值.请从注释部分中引用我的代码.在此处输入图像描述
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>
推荐答案
打印select框时，可以像下面这样传递参数onChange="sendInfo(this.value);"函数:
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');
现在在您的sendInfo函数中，如下所示:
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();
}
也不要忘记添加ID为amit的div.现在，如果选择Type B，则val将具有值TypeB，请在select查询中使用此值并发送结果回到您的jsp页面.
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.
这篇关于当用户从下拉菜单中选择选项时，如何从数据库打印记录?动态程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
