Question

我试图在表单上创建一个动态选择框，当我在第一个选择框中选择一个元素时，ajax应该带一个arraylist并将其放在第二个选择框上。这是我的jsp文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SO question 4112686</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="ajax.js"></script>
</head>
<body>
    <form method="get" action="GetUserServlet">
        <select id="userSelect" name="user">
            <option id="aUser" value="" disabled selected>USUARIO</option>
            <option id="aUser" value="1">User 1</option>
            <option id="aUser" value="2">User 2</option>
            <option id="aUser" value="3">User 3</option>
        </select>
        <br>
        <select id="items" name="items">
            <option value='' disabled selected>ITEM</option>
        </select>
        <br>
        <button type="submit" id="somebutton">press here</button>
    </form>
</body>
</html>

这是我的servlet GetUserServlet文件上的doGet方法

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    ArrayList<String> list = new ArrayList<>();
    list.add("item1");
    list.add("item2");
    list.add("item3");
    String usuario = request.getParameter("user");
    System.out.println(usuario);

    if(usuario.equals("1")) {
        list.clear();
        list.add("item9");
        list.add("item19");
    }

    String json = new Gson().toJson(list);

    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

我使用一个条件来测试它是否是第一个用户，y仅显示在选择框item9和item19上。

这是我的ajax.js文件

$(document).on("change", "#userSelect", function(responseJson) {
var user = $("#userSelect").val();
$.ajax({
    url: 'GetUserServlet',
    type: 'get',
    data: {user:user},
    dataType: 'json',
    complete:function(){
        $.get("GetUserServlet", function(responseJson) {
            $("#items").empty();
            $("<option value='' disabled selected>ITEM</option>").appendTo($("#items"))
            $.each(responseJson, function(index, item) {
                $("<option value='" + item + "'>").text(item).appendTo($("#items"));
            });
        });
    },
});
});

我有一个ajax方法将用户参数发送到servlet，在内部，我有$ .get从servlet获取数组并将选项值放在选择框中。当我选择user1时，永远不会带给我正确的数组列表。

使用ajax和servlet的动态选择框

0 个答案: