JavaScript 三级联动的实现

最新推荐文章于 2024-04-01 00:45:14 发布

原创

最新推荐文章于 2024-04-01 00:45:14 发布 · 887 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #三级联动 #添加商品 #更新商品

本文介绍了如何在项目中实现JavaScript三级联动功能，特别是在添加和更新商品时，涉及到所属商品、一级类目和二级类目的选择。通过从后台获取数据，然后使用JavaScript动态填充SELECT选项并设置初始选中状态，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目用用到了“添加商品”，商品有所属商品、一级类目、二级类目等，从而构成了三个级别，为了提升用户体验，做了如下的三级联动

准备工作：
一、获取后台数据，



public class MenuJSON {

    public static void GetMenuJsonData(HttpServletRequest request) {
        User user = (User) request.getSession().getAttribute("user");
        List<Shop> shops = new ArrayList<Shop>();
        Shop shop = new Shop();
        if(user.getCompanyId()==0){
   
   //超级管理员          
            shops = DaoFactory.getShopDao().getAllShop();               
        }else{
   
   //普通管理员
            shop=DaoFactory.getShopDao().getShop(user.getCompanyId());
            shops.add(shop);
        }

        List<Map> listMap_shopLevelType = new ArrayList<Map>();
        List<Map> listMap_levelOneType = new ArrayList<Map>();
        List<Map> listMap_levelTwoType = new ArrayList<Map>();

        List<LevelOneType> levelOneTypes = new ArrayList<LevelOneType>();
        List<LevelTwoType> levelTwoTypes = new ArrayList<LevelTwoType>();

        Map<String, Object> map_shopLevelType = new HashMap<String, Object>();
        Map<String, Object> map_levelOneType = new HashMap<String, Object>();
        Map<String, Object> map_levelTwoType = new HashMap<String, Object>();

        int shopId;
        int levelOneTypeId;
        int levelTwoTypeId;
        int referenceTypeId;

        for(int i=0;i<shops.size();i++){
            shop = shops.get(i);
            shopId = shop.getId();
            map_shopLevelType = new HashMap<String, Object>();
            listMap_levelO