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

小编典典

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

jsp

当用户从下拉菜单中选择特定选项，然后选择特定选项后，我正在尝试编写代码。值会显示在下拉菜单旁边。该值已存在于数据库中，只需要根据下拉菜单进行检索即可。例如-
如果用户从选择选项中选择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>&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>

阅读 208

2020-06-08

共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();  
                   }

另外不要忘了添加div有ID amit。现在，如果你选择Type B的话，val有一定的价值TypeB，在你使用这个select查询并发送结果返回到您的jsp网页。

2020-06-08