当用户从下拉菜单中选择选项时，如何从数据库中打印记录？动态程序
Posted
技术标签:
【中文标题】当用户从下拉菜单中选择选项时，如何从数据库中打印记录？动态程序【英文标题】：how print record from database when user select options from Dropdown menu? dynamic program 【发布时间】：2019-09-18 23:51:10 【问题描述】：当用户从下拉菜单中选择特定选项然后选择特定选项后，我正在尝试编写代码。值会打印在下拉菜单旁边。该值已经存在于数据库中，只需要根据下拉菜单检索它。例如 - 如果用户从选择选项中选择 TYPE A 选项，则根据 TYPE A 打印值，即表“type_a”列值需要从数据库中打印。当用户在其中选择特定类型时，我正在尝试创建动态选择选项，然后必须根据它打印值。请在评论部分参考我的代码。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>【问题讨论】：
我已将您的代码从 JS Fiddle 复制到您帖子中的 sn-p 中。请尽量不要依赖非现场参考来证明您的问题，尤其是在 cmets 中。相反，请在您的问题中包含证明（和复制）您的问题所需的一切。 【参考方案1】：当您打印select 框时，您可以传递参数onChange="sendInfo(this.value);" 函数，如下所示：
$('<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 函数中执行以下操作：
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();
另外不要忘记添加div id amit。现在，如果您选择Type B，那么val 将具有值TypeB，在您的select 查询中使用它并发送结果返回您的jsp 页面。
【讨论】：
评论不用于扩展讨论；这个对话是moved to chat。 确定这是请求表结构：-imgur.com/a/J1KEtT2 这是请求表中的所有记录：-imgur.com/a/93aK7f5 成功了，非常感谢斯瓦蒂。你只是 *** 的传奇。再次感谢你。我给了 100 星 UP :) Grt ..接受这个答案:) 完全满意地接受了。哇，你真的做得很好，再次感谢斯瓦蒂。如果我对您的工作造成任何干扰，我们深表歉意。 :)以上是关于当用户从下拉菜单中选择选项时，如何从数据库中打印记录？动态程序的主要内容，如果未能解决你的问题，请参考以下文章