layui联动选择框

悠悠 2023-06-24 13:26 31阅读 0赞

**表单**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70][]

**代码**

<form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post">		
    		<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">入库单号:</label>
    					<div class="layui-input-inline">
    						<input type="text" name="enterStockId" autocomplete="off" class="layui-input" value="${enterStockId}" readonly="readonly">
    					</div>
    				</div>
    				<div class="layui-inline">
    					<label class="layui-form-label">供应商:</label>
    					<div class="layui-input-inline">						
    						<select name="supplier" lay-verify="required">
    							<option value="">请选择</option>
    							<option value="京东商城" selected="">京东商城</option>			        		       		        
    					    </select>
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">入库日期:</label>
    					<div class="layui-input-inline">
    						<input type="text" name="enterDate" id="enterDate" class="layui-input" lay-verify="date" placeholder="yyyy-MM-dd">
    					</div>
    				</div>
    				<div class="layui-inline">
    						<label class="layui-form-label">经办人:</label>
    						<div class="layui-input-inline">
    							<input type="text" name="operator" class="layui-input" value="${user.realName}" readonly="readonly">
    						</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">设备类型:</label>
    					<div class="layui-input-inline">
    						<select name="parentName" lay-filter="parentName" lay-verify="required">
    							<option value="">请选择</option>
    							<c:forEach items="${types}" var="t">
    								<option value="${t.parentName }">${t.parentName}</option>
    							</c:forEach>			        		       		        
    					    </select>
    					</div>
    				</div>
    				<div class="layui-inline">
    					<label class="layui-form-label">明细分类:</label>
    					<div class="layui-input-inline">
    						<select name="childrenName" id="childrenName" lay-filter="childrenName" lay-verify="required">									        		       		        
    					    </select>
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">设备名称:</label>
    					<div class="layui-input-inline">
    						<select name="goodsName" id="goodsName" lay-filter="goodsName" lay-verify="required">										        		       		        
    					    </select>
    					</div>
    				</div>
    				<div class="layui-inline">
    					<label class="layui-form-label">规格型号:</label>
    					<div class="layui-input-inline">
    						<select name="specs" id="specs" lay-verify="required">										        		       		        
    					    </select>						
    					</div>
    				</div>
    			</div>				
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">入库数量:</label>
    					<div class="layui-input-inline">
    						<input type="text" name="number" lay-verify="number" autocomplete="off" class="layui-input"  placeholder="数量">
    					</div>					
    				</div>				
    			</div>						
    		<div class="layui-form-item">
    			<div class="layui-input-block">
    				<button class="layui-btn" lay-submit lay-filter="adminInfo">保存</button>
    				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    			</div>
    		</div>		
    	</form>

** 联动代码**

**后端代码**

/itmanage/src/main/java/com/chief/itmanage/controller/EnterStockController.java

//入库登记
    	@RequestMapping("addStock")
    	public String addStock(Model model) {
    		Date date=new Date();		
    		DateFormat formatter= new SimpleDateFormat("yyyyMMddHHmmss");	
    		String enterStockId= "rk"+formatter.format(date);	
    		model.addAttribute("enterStockId", enterStockId);	
    		List<Type> types=typeService.getParentName();		
    		model.addAttribute("types", types);
    		return "addStock";
    	}
    
    // 二级分类选择框
    	@RequestMapping("getByChildrenName")
    	@ResponseBody
    	public String getByChildrenName(String childrenName) {
    		List<Goods> list = goodsService.getByChildrenName(childrenName);
    		String s = JSON.toJSONString(list);
    		logger.info(s);
    		JSONObject obj = new JSONObject();
    		// 前台通过key值获得对应的value值
    		obj.put("code", 0);
    		obj.put("msg", "");
    		obj.put("data", list);
    		return obj.toJSONString();
    	}
    
    //联动选择框
    	@RequestMapping("getChildrenName")
    	@ResponseBody
    	public String getChildrenName(String parentName) {
    		List<Type> list=typeService.getChildrenName(parentName);
    		String s = JSON.toJSONString(list);
    		logger.info(s);
    		JSONObject obj = new JSONObject();
    		// 前台通过key值获得对应的value值
    		obj.put("code", 0);
    		obj.put("msg", "");
    		obj.put("data", list);
    		return obj.toJSONString();
    	}
    
    // 型号选择框
    	@RequestMapping("getSpecs")
    	@ResponseBody
    	public String getSpecs(String goodsName) {
    		List<Goods> list = goodsService.getByGoodsName(goodsName);
    		String s = JSON.toJSONString(list);
    		logger.info(s);
    		JSONObject obj = new JSONObject();
    		// 前台通过key值获得对应的value值
    		obj.put("code", 0);
    		obj.put("msg", "");
    		obj.put("data", list);
    		return obj.toJSONString();
    	}

**最终效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191223154700846.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191223155648214.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70