当用户 select 从下拉菜单中选择选项时，如何从数据库中打印记录？动态程序

Question

我正在尝试编写代码，当用户从下拉菜单中选择 selects 特定选项然后在 selecting 特定选项之后。值打印在下拉菜单旁边。该值已经存在于数据库中，只需要根据下拉菜单检索它。例如-如果用户 select TYPE A 选项来自 select 选项，则根据 TYPE A 打印值，即 Table "type_a" 列值需要从数据库打印。我正在尝试创建动态 select 选项，当用户在其中输入 select 特定类型时，必须根据它打印值。请参考我在评论区的代码。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>&nbsp;&nbsp;<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&nbsp;<input type="text" id="datepicker" name="fromdate">&nbsp;TO&nbsp;
                          <input type="text" id="datepickerto" name="todate"></td>
                &nbsp;&nbsp;&nbsp;&nbsp;<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>

Answer 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>&nbsp;&nbsp;<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。现在，如果你 select Type B 那么，val 将具有价值 TypeB ，在您的 select 查询中使用它并将结果发送回您的 jsp 页面。

当用户 select 从下拉菜单中选择选项时，如何从数据库中打印记录？动态程序

how print record from database when user select options from Dropdown menu? dynamic program

javascript

mysql

ajax

jsp

onselect