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

一、动态效果

二、html代码

	<form>
				<ul class=" page-content">

					<li><label class="label_name">配送方式：</label>
						<span class="add_name">
                            <select name='shippingMethodId' style='width:200px'  id="shippingMethodId">
                                <option value='' selected>请选择</option>
                                <option th:each="log: ${logData}" th:value="${log.logisticsId}" th:text="${log.logisticsName}"  ></option>
                              </select>
						</span>
					</li>

					</li>
					<li><label class="label_name">车辆选择：</label><span class="add_name">
                                    <select name='sldd' style='width:200px' id="shippingTruckId">
                                        <option value='' selected>请选择</option>
                                    </select>
						</span>
					</li>

					<li><label class="label_name">司机姓名：</label>
						<span class="add_name"><select name='司机姓名' style='width:200px' id="driverName">
                                        <option value='' selected>请选择</option>
                                    </select>
						</span>
					</li>
				</ul>
			</form>

三、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);
    }