下拉框三级联动,数据库动态获取数据(springboot+ajax+html)

页面:

<#select id="whouseUuid" name="选择仓库" underline="true">
      <option value="">请选择</option>
</#select>
<#select id="regionUuid" name="选择库区" underline="true">
      <option value="">请选择</option>
 </#select>                            
<#select id="shelvesUuid" name="选择货架" underline="true">
      <option value="">请选择</option>
 </#select>

JS:

$(function(){
    $.ajax({
        type:"POST",
        url:Feng.ctxPath + "/tCommonCargoLocation/queryWhun",
        dataType: "json",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        async: false,
        cache: false,
        success: function (data) {
            $.each(data,function(index,item){
                $('#whouseUuid').append(new Option(item.whouse_name,item.whouse_uuid));//往下拉菜单里添加元素
            })
        }

    })
});

$("#whouseUuid").change(function () {
    $("#regionUuid").html("");
    var val = $("#whouseUuid option:selected").val();
    var data = {"data":val};
    $.ajax({
        type:"POST",
        url:Feng.ctxPath + "/tCommonCargoLocation/queryRegion",
        dataType: "json",
        data:JSON.stringify(data),
        contentType: "application/json",
        async: false,
        cache: false,
        success: function (data) {
            $('#regionUuid').append(new Option("",""));
            $.each(data,function(index,item){
                $('#regionUuid').append(new Option(item.region_name,item.region_uuid));//往下拉菜单里添加元素
            })
        }
    })
});

$("#regionUuid").change(function () {
    $("#shelvesUuid").html("");
    var val = $("#regionUuid option:selected").val();
    var data = {"data":val};
    $.ajax({
        type:"POST",
        url:Feng.ctxPath + "/tCommonCargoLocation/queryShelves",
        dataType: "json",
        data:JSON.stringify(data),
        contentType: "application/json",
        async: false,
        cache: false,
        success: function (data) {
            $('#shelvesUuid').append(new Option("",""));
            $.each(data,function(index,item){
                $('#shelvesUuid').append(new Option(item.shelves_name,item.shelves_uuid));//往下拉菜单里添加元素
            })
        }
    })
});

后台:

 /**
     * 下拉框动态获取仓库
     * @return
     */
    @RequestMapping(value = "queryWhun")
    @ResponseBody
    public List<Map<String,Object>> findWhun(){
        return tCommonCargoLocationService.findWhun();
    }


    /**
     * 下拉框动态获取库区
     * @param data
     * @return
     */

    @RequestMapping(value = "queryRegion")
    @ResponseBody
    public List<Map<String,Object>> findRegion(@RequestBody String data){
        Map<String,String> map = JSONObject.fromObject(data);
        String whouseuuid = map.get("data");
        return tCommonCargoLocationService.findRegion(whouseuuid);
    }

    /**
     * 下拉框动态获取货架
     * @param data
     * @return
     */

    @RequestMapping(value = "queryShelves")
    @ResponseBody
    public List<Map<String,Object>> findShelves(@RequestBody String data){
        Map<String,String> map = JSONObject.fromObject(data);
        String regionuuid = map.get("data");
        return tCommonCargoLocationService.findShelves(regionuuid);
    }

数据库SQL:

<select id="findWhun" resultType="java.util.Map">
        select w.whouse_uuid,w.whouse_name
        from t_common_warehouse w
    </select>

    <select id="findRegion" resultType="java.util.Map" parameterType="java.lang.String">
        select r.region_uuid,r.region_name
        from t_common_region r
        where r.whouse_uuid = #{whouseuuid}
    </select>

    <select id="findShelves" resultType="java.util.Map" parameterType="java.lang.String">
        select s.shelves_uuid,s.shelves_name
        from t_common_shelves s
        where s.region_uuid = #{regionuuid}
    </select>

《下拉框三级联动,数据库动态获取数据(springboot+ajax+html)》

    原文作者:成长的路y
    原文地址: https://blog.csdn.net/qq_41508632/article/details/89323396
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞