SpringBoot+Thymeleaf+JQuery：ajax实现二级联动、三级联动、多级联动，动态渲染下拉框

深碍√TFBOYSˉ_ 2022-11-10 05:39 651阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]

### ajax实现二级联动、三级联动、多级联动动态下拉框 ###

*  一、动态效果
 *  二、html代码
 *  三、js代码
 *  四、java代码

# 一、动态效果 #

![在这里插入图片描述][20210316172954782.gif_pic_center]

# 二、html代码 #

# 三、js代码 #

/*选择车辆*/
    	$("#shippingMethodId").bind("change", function () {
        
    		$('#shippingTruckId option').not(":first").remove();
    		$.ajax({
        
    			url: '/shippings/allVehicleType',
    			data: {
        
    				logisticsId: $("#shippingMethodId").val()
    			},
    			success: function (d) {
        
    				if (d) {
        
    					var data = d;
    					for (var i in data) {
        
    						/*循环添加option*/
    						$("#shippingTruckId:last").append("<option value=" + data[i].vehicleId + ">" + data[i].vehicleName + "</option>")
    					}
    				} else {
        
    					layer.msg("车辆加载失败", {
        icon: 2, time: 2000})
    				}
    			}
    		})
    	});

/*选择司机*/
    	$("#shippingTruckId").bind("change", function () {
        
    		$("#driverName option").not(":first").remove();
    		$.ajax({
        
    			url: '/shippings/allDriverMessage',
    			data: {
        
    				logisticsId: $("#shippingMethodId").val(),
    				vehicle_type: $("#shippingTruckId").val()
    			},
    			success: function (d) {
        
    				if (d) {
        
    					var data = d;
    					for (var i in data) {
        
    						$("#driverName:last").append("<option value=" + data[i].driverId + ">" + data[i].driverName + "</option>")
    					}
    				} else {
        
    					layer.msg(d.msg, {
        icon: 2, time: 2000});
    				}
    			}
    		})
    	});

# 四、java代码 #

/**
         *  查找物流公司的信息
         * 跳转到订单发货页面
         * @return
         */
        @RequestMapping("deliver")
        public String deliver(ModelMap map){
        
            String companyId ="2";
            List<Logistics> logData = logisticsService.getlogisticsNameByCompanyId(companyId);
            map.put("logData",logData);
            return "ware/dd_fh";
        }

/**
         * 选择车辆
         * @param logisticsId
         */
        @ResponseBody
        @RequestMapping("allVehicleType")
        public List<Vehicle> allVehicleType(String logisticsId){
        
            return vehicleService.getVehicleBylogisticsId(logisticsId);
        }
    
        /**
         * 根据logisticsId查找驾驶员，车牌号
         * @param logisticsId
         * @param vehicle_type
         * @return
         */
        @ResponseBody
         @RequestMapping("allDriverMessage")
         public List<Driver> allDriverMessage(String logisticsId,String vehicle_type){
        
         return driverService.getDriverByLogisticsId(logisticsId);
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ2MDg0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/e6718ac7c1af4a5d856e24c64baeabd9.png
[20210316172954782.gif_pic_center]: /images/20221023/6afdfd4af970417ea619da9df6f01087.png