使用来自单个数据库 table 的 ajax 的级联下拉列表？

Question

我想从我的数据库中的单个 table 创建两个级联下拉菜单。

主要类别 的第一个下拉菜单运行良好。即它使用 AJAX.

填充下拉列表中的所有数据

现在，子类别 的第二个下拉列表也正在填充。但是问题现在是当我 select 访问主类别时它在第二个下拉列表中获取整个子类别列。

我想要的是，如果我 select 一个主要类别，则只应填充数据库中该行中的子类别，而不是整个列。

我将添加我的数据库的屏幕截图 table 以便更好地理解以及我尝试过的代码。

ex:- 如果我 select 主要类别中的水果只有 aaaa 应该填充在子类别中。同样，如果 i select Vegetables 在主类别中，只有 bbbb 应该填充在子类别中。

但现在发生的情况是 如果我 select 水果整个子类别列正在填充。

有人可以帮我解决这个问题吗，在此先感谢。

AJAX 我写的


    <script type="text/javascript">
    
        $(document).ready(function()
        {
            $.ajax
            ({
                url: "listdropdowns",
                type: "GET",
                dataType: "json",
                success: function(loadmaindropdown)
                {
                    var populatemain= $("#home_main_cat_dropdown_id");

                    $.each(loadmaindropdown, function(index, category)
                    {
                        $("<option>").val(category.main_category).text(category.main_category).appendTo(populatemain);
                    });
                },
            });
        });
        
        $(document).ready(function()
        {
            $("#home_main_cat_dropdown_id").change(function()
            {
                var main_category_values = (this.value) ;

            $.ajax
            ({
                url: "listdropdowns",
                type: "GET",
                dataType: "json",
                success: function(loadsubdropdown)
                {
                    var populatesub = $("#home_sub_cat_dropdown_id");

                    $.each(loadsubdropdown, function(index, category)
                    {
                        $("<option>").val(category.sub_category).text(category.sub_category).appendTo(populatesub);
            console.log(home_sub_cat_dropdown_id.value);                
                    });
                },
            });
            });
        });
        
    </script>

在我的 DAO 中，我从那里获取整个类别列表


public List<Category> selectAllCategory() throws SQLException, ClassNotFoundException
    {
        List<Category> listCategory = new ArrayList<>();
        
        Connection conn = DatabaseConnection.initializeDatabase();
        
        String query = " select * from list_of_categories ";
        
        try
        {
            PreparedStatement prestmt = conn.prepareStatement(query);
             
            ResultSet rs = prestmt.executeQuery();
             
             while (rs.next())
             {   
                 int id = rs.getInt("id");                           
                 String main_category = rs.getString("main_category");
                 String sub_category = rs.getString("sub_category");
       
                 listCategory.add(new Category(id,main_category,sub_category));
             }  
        }

我的控制器


public void populate_dropdowns(HttpServletRequest request, HttpServletResponse response)throws SQLException, IOException, ClassNotFoundException, ServletException, ParseException
    {
        try
        {
            List<Category> listCategory = productDAO.selectAllCategory();
            
            String json = new Gson().toJson(listCategory);
            
            response.setContentType("application/json");
            
            response.setCharacterEncoding("UTF-8");
            
            response.getWriter().write(json);
        }
        
        catch (SQLException e)
        {
            e.printStackTrace();
            throw new ServletException(e);
        }
    }

Answer 1

我像这样修改了我的代码以解决我的问题，现在它可以正常工作了。

我为 DAO 和 Controller 中的下拉菜单创建了单独的方法，并根据需要获取数据。

我的AJAX函数：-

    <script type="text/javascript">

        $(document).ready(function()
        {
            $.get("listmaindropdown",function(loadmaindropdown)
            {
                var aaaa = $("#home_main_cat_dropdown_id");
                $.each(loadmaindropdown, function(index, category)
                {
                    $("<option>").val(category.main_category).text(category.main_category).appendTo(aaaa);
                });
                    
                $("#home_main_cat_dropdown_id").change(function()
                {
                    var main_category_values = (this.value);
    
                        $.get("listsubdropdown",function(loadsubdropdown)
                        {
                            var bbbb = $("#home_sub_cat_dropdown_id")
                                
                            bbbb.find('option').remove();
                                
                            $.each(loadsubdropdown, function(index, category)
                            {
                                if(main_category_values == category.main_category)
                                {
                                    $("<option>").val(category.sub_category).text(category.sub_category).appendTo(bbbb);
                                }
                            });  
                        });
                    }); 
                });
            });
        }   

    </script>

DAO:-


    public List<Category> selectonlymaincategory() throws SQLException, ClassNotFoundException
    {
        List<Category> listCategory = new ArrayList<>();
        
        Connection conn = DatabaseConnection.initializeDatabase();
        
        String query = " select distinct main_category from list_of_categories order by main_category ";
        
        try
        {
            PreparedStatement prestmt = conn.prepareStatement(query);
             
            ResultSet rs = prestmt.executeQuery();
             
             while (rs.next())
             {                       
                 String main_category = rs.getString("main_category");

                 listCategory.add(new Category(main_category));
             }  
        } 
         
        catch (SQLException e) 
        {
            e.printStackTrace();
        }
        
        return listCategory;        
    }
    
    public List<Category> selectonlysubcategory() throws SQLException, ClassNotFoundException
    {
        List<Category> listCategory = new ArrayList<>();
        
        Connection conn = DatabaseConnection.initializeDatabase();
        
        String query = " select * from list_of_categories order by sub_category";
        
        try
        {
            PreparedStatement prestmt = conn.prepareStatement(query);
             
            ResultSet rs = prestmt.executeQuery();
             
             while (rs.next())
             {                       
                 int id = rs.getInt("id");                           
                 String main_category = rs.getString("main_category");
                 String sub_category = rs.getString("sub_category");

                 listCategory.add(new Category(id,main_category,sub_category));
             }  
        } 
         
        catch (SQLException e) 
        {
            e.printStackTrace();
        }
        
        return listCategory;        
    }

控制器 Servlet：-


    public void populate_maindropdown(HttpServletRequest request, HttpServletResponse response)throws SQLException, IOException, ClassNotFoundException, ServletException, ParseException
    {
        try
        {
            List<Category> listCategory = productDAO.selectonlymaincategory();
            
            String json = new Gson().toJson(listCategory);
            
            response.setContentType("application/json");
            
            response.setCharacterEncoding("UTF-8");
            
            response.getWriter().write(json);
        }
        
        catch (SQLException e)
        {
            e.printStackTrace();
            throw new ServletException(e);
        }
    }
    public void populate_subdropdown(HttpServletRequest request, HttpServletResponse response)throws SQLException, IOException, ClassNotFoundException, ServletException, ParseException
    {
        try
        {
            List<Category> listCategory = productDAO.selectonlysubcategory();
            
            String json = new Gson().toJson(listCategory);
            
            response.setContentType("application/json");
            
            response.setCharacterEncoding("UTF-8");
            
            response.getWriter().write(json);
        }
        
        catch (SQLException e)
        {
            e.printStackTrace();
            throw new ServletException(e);
        }
    }

使用来自单个数据库 table 的 ajax 的级联下拉列表？

Cascading Dropdown using ajax from single database table?

postgresql

ajax

jquery

jsp

cascadingdropdown