[英]how print record from database when user select options from Dropdown menu? dynamic program
當用戶從下拉菜單中選擇特定選項，然后選擇特定選項后，我正在嘗試編寫代碼。 值會顯示在下拉菜單旁邊。 該值已存在於數據庫中，只需要根據下拉菜單進行檢索即可。 例如-如果用戶從選擇選項中選擇TYPE A選項，則根據TYPE A打印值，即需要從數據庫中打印表“ type_a”列值。 我試圖在用戶選擇特定類型時創建動態選擇選項，然后必須根據它打印值。 請參考我的代碼從評論部分。 在此處輸入圖片說明
<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);" 功能如下：
$('<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為amit div 。現在，如果選擇Type B則val將具有TypeB值，請在select查詢中使用它，並將結果發送回jsp頁面。
如何使用Jquery和Ajax從數據庫中的jsp中創建動態依賴下拉菜單
[英]How to create a dynamic dependent dropdown Select menu in jsp from the database using Jquery and Ajax
當用戶從下拉菜單中選擇一個選項時，如何更新任何歸檔的文本？
[英]How to update any text filed when the user is select an option from a dropdown-menu?
使用jQuery將選擇選項從數據庫填充到動態選擇選項
[英]Populate select options from database to dynamic select option using jQuery
用戶關閉瀏覽器時如何從mysql數據庫中刪除記錄
[英]How to delete a record from mysql database when the user closes the browser
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.