Question

我有两个下拉列表，第一个是使用DOM解析器和JSTL填充的。根据第一个下拉列表的值，第二个下拉列表将被填充，我已经使用jQuery和ajax完成了这一操作。我能够看到第二个下拉列表中的内容/项目，但我无法选择除默认项目之外的任何其他项目。

这是我的servlet：

package report;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * Servlet implementation class ServiceToFetchSubType
 */
public class ServiceToFetchSubType extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public ServiceToFetchSubType() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        String value=request.getParameter("name");
        System.out.println("The Value is: "+value);

        ArrayList<String> arrayList = new ArrayList<String>();

        if(value.equals("Superman"))
        {
            arrayList.add("Doomsday");
            arrayList.add("Darkseid");
            arrayList.add("Lex Luthor");

            /*request.setAttribute("arry", arrayList);
            request.getRequestDispatcher("Welcome.jsp").forward(request, response);*/   
        }

        String json = new Gson().toJson(arrayList);
        response.setContentType("application/json");
        response.getWriter().write(json);

    }

}

这是我的jsp：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
        <%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>

        <script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown").click(function (event) {
                    var name = $("#doctype").val();
                    $.ajax({
                        url: 'ServiceToFetchSubType',
                        data: { name: name },
                        type: 'post',
                        cache: false,
                        success: function (response) {
                            var select = $('#docsubtype');
                            select.find('option').remove();
                            $.each(response, function (index, value) {
                                $('<option>').val(value).text(value).appendTo(select);
                            });
                            callback.apply(select);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>

        <!-- Wrapper -->
        <div id="wrapper">

            <!-- Header -->
            <header id="header">
                <div class="content">
                    <div class="inner">
                        <h1>Drop Down Menu</h1>
                        <div class="dropdown">
                            <select name="doctype" id="doctype" class="my_dropdown" style="color: white; background: #655D78">
                                <option disabled="disabled" selected="selected">Select Doc Type</option>
                                <c:foreach items="${bt}" var="doctypes">
                                             <option><c:out value="${doctypes}"/></option>
                                </c:foreach>
                            </select>
                        </div>
                        <div class="dropdown">
                            <select name="doctype" id="docsubtype" class="my_dropdown" style="color: white; background: #655D78">
                                <option disabled="disabled" selected="selected">Select Doc SubType</option>
                                <option></option>
                            </select>
                        </div>
                    </div>
                </div>
            </header>
            <!-- Main -->
            <!-- Footer -->
            <footer id="footer">
                <p class="copyright">&copy; Design: Content Management OPS</p>
            </footer>
        </div>

        <!-- BG -->
        <div id="bg"></div>

        <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/skel.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>
    </body>
</html>

我对jQuery和Ajax很新，所以任何类型的帮助都会受到赞赏。谢谢！

无法从下拉列表中选择特定值

0 个答案: