jquery 多级联动下拉列表含（数据模型）

最新推荐文章于 2021-06-03 17:24:59 发布

转载最新推荐文章于 2021-06-03 17:24:59 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hwaggLee/p/7285675.html

文章标签：

#javascript #json #java #ViewUI

本文介绍了一种使用JavaScript实现的级联下拉框功能，通过POST请求获取JSON数据，并根据返回的数据动态生成多级联动的下拉菜单。文章详细解释了函数_yh_linkage的参数及工作原理，包括初始化下拉列表、递归处理联动数据等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法

/**
 * 级联
 * 联动
 * @param url：访问json数据的地址
 * @param param：参数
 * @param levelIds：页面下拉标签数组，为联动级数
 * @private
 */
function _yh_linkage(url,params, levelIds){
    _yh_postRequest(url,params,function(response){
        //console.log(response);
        /**
         * 初始下拉列表数据
         * @param obj
         * @returns {jQuery}
         */
        function objInit(obj){
            return $('#'+obj).html('<option value="">请选择</option>');
        }
        selectToChildOption(response,levelIds,0);

        /**
         * 递归联动初始数据
         * @param object：数据
         * @param levelIds：联动下拉框id数组
         * @param levelIndex：第几级下拉列表
         */
        function selectToChildOption(object,levelIds,levelIndex){
            for (var index in levelIds) {
                if(index<levelIndex) continue;
                objInit(levelIds[index]);
            }
            if( object == null  ) return ;
            if( levelIds == null || levelIds.length <= levelIndex ) return ;
            if( object != null && object.list != null ) {
                $.each(object.list,function(i,o){
                    $('#'+levelIds[levelIndex]).append('<option value="'+o.id+'" >'+o.name+'</option>');
                });
                $('#'+levelIds[levelIndex]).change(function() {
                    var n = $('#'+levelIds[levelIndex]).get(0).selectedIndex-1;
                    selectToChildOption(object.list[n], levelIds, levelIndex + 1);
                });
            }
        }
    });
}

需要用到的另一函数

/**
 * post请求
 * @param url
 * @param params
 * @param callbackfunciton：回调函数
 * @returns
 */
function _yh_postRequest(url,params,callbackFunction){
    //console.log(params);
    if(params == null ){
        params = {};
    }
    $.post(url,params,function(response){
        if( callbackFunction != null)
            callbackFunction(response);
    });
}

java

public class TKY {
    private String id;
    private String name;
    private boolean select= false;//是否默认选中
    private List<TKY> list = new ArrayList<>();
    
    public TKY(String id ,String name){
        this.id = id;
        this.name = name;
    }

    public String getId() {
        return id;
    }

    public String getName() {
        return name;
    }

    public List<TKY> getList() {
        return list;
    }

    public void addList(TKY t) {
        list.add(t);
    }

    public boolean isSelect() {
        return select;
    }

    public void setSelect(boolean select) {
        this.select = select;
    }
    
}