当用户从下拉菜单中选择特定选项，然后选择特定选项后，我正在尝试编写代码。值会显示在下拉菜单旁边。该值已存在于数据库中，只需要根据下拉菜单进行检索即可。例如-如果用户从选择选项中选择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>
答案 0 :(得分：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();
}
也不要忘记添加ID为div的{{1}}。现在，如果您选择amit，则Type B将具有值val，请使用在您的TypeB查询中返回，并将结果发送回您的select页面。