若依/RuoYi框架（Thymeleaf模板引擎）前端遍历list显示select下拉框，根据选择option动态加载内容

一、前端遍历list显示select下拉框

后台代码：

@GetMapping("/addPets/{id}")
    public String addPets(@PathVariable("id") Long id, ModelMap mmap)
    {
        Users users = usersService.selectUsersById(id);
        List list = petsService.selectPetsList(new Pets());
        mmap.put("petsList", list);
        Map map = new HashMap<>();
        for(Pets pets : list){
            map.put(pets.getLevel(), pets);
        }
        mmap.put("list", JSONObject.toJSON(map));
        return prefix + "/addPets";
    }

前端代码：

宠物：
                

                    
                        
                    
                

petsList后台获取到的集合th:each进行遍历,pets作为集合对象的变量名称,th:value="${pets.id}作为value值
th:text="${pets.name}"作为需要显示的内容

效果如下：

 

二、根据选择option动态加载内容

效果如下：

前端代码：

    


    

        
        

            
            

                手机号：
                

                    
                
            
            

                宠物：
                

                    
                        
                    
                
            
            

                级别：
                

                    
                
            
            

                价值：
                

                    
                
            
            

                合约收益：
                

                    
                
            
            

                预约/直购领养消耗积分：
                

                    
                
            
            

                状态：
                

                    
                        收益中（有收益）
                        待转让（无收益）
                    
                
            
            

                价值：
                

                    
                
            
        
    
    
    

1、

 

首先将petsList转为json对象，然后把select选择的值看作key去获取其pets对象，接下来把相应div设为可见并且赋予对应的值即可。

 

注：默认其div为隐藏不可见，当select有变化时将其设为可见。