jeesite级联下拉框

        1. 首先，搞本字典，在系统设置->字典管理里新增一部字典，并添加数据

        

        前两位是一级分类，再两位是二级分类，最后三位是最后一级分类

 

        2. 在需要下拉框的html文件内，找到下拉框对应标签然后在<script>标签中添加以下js代码，用标签后的内容替换#后面的字符串

var assetSortJson;
$.ajax({
    type:"POST",
    url:"${ctx}/sys/dictData/treeData?dictType=asset_sort",
    dataType:"json",
    success: function(json){
        
        assetSortJson = json
        
        // 当前选择的class编号
        var cla = $('#assetClassId option:selected').val();
        // 指向options所在标签
        var classSelect = $("#assetClassId")[0];
        // 清空所有selection，在for循环中重新导入相应的class
        classSelect.options.length=1;
        
        var sort = $('#assetSortId option:selected').val();
        var sortSelect = $("#assetSortId")[0];
        sortSelect.options.length=1;
        
        
        var category = $('#categoryId option:selected').val();
        var categorySelect = $("#categoryId")[0];
        categorySelect.options.length=1;
        
        for (var i of assetSortJson) {
            if (i.value.length == 2) {
                classSelect.options.add(new Option(i.name, i.value, false, i.value == cla));
            } else if (i.value.length == 4 && i.value.substr(0, 2) == cla) {
                sortSelect.options.add(new Option(i.name, i.value, false, i.value == sort));
            } else if (i.value.length == 7 && i.value.substr(0, 4) == sort) {
                categorySelect.options.add(new Option(i.name, i.value, false, i.value == category));
            }
        }
    }
});

        这里的assetsort会从字典的路由中把整本字典以json格式取出来，之后别有他用。

        我的分类有三级，分别取名class, sort, category。根据不同的长度，依次将不同级别的选项加入到xxxSelect中。

        现在我们再次打开页面，初始化后，选项已经不再是整本字典了，而是我们分类之后的结果。

 

        3. 然后再次找到那几个标签，加上onchange=<方法名>，然后在<script>标签中再次添加如下代码

function getSort() {
    var selectedClass = $('#assetClassId option:selected').val();
    
    var selectedSort = $('#assetSortId option:selected').val();
    var sortSelect = $("#assetSortId")[0];
    sortSelect.options.length=1;
    
    var categorySelect = $("#categoryId")[0];
    categorySelect.options.length=1;
    
    for (var i of assetSortJson) {
        if (i.value.length == 4 && i.value.substr(0, 2) == selectedClass) {
            sortSelect.options.add(new Option(i.name, i.value, false, i.value == selectedSort));
        }
    }
}

function getCategory() {
    var selectedSort = $('#assetSortId option:selected').val();
    
    var isSelected = $('#categoryId option:selected').val();
    var categorySelect = $("#categoryId")[0];
    categorySelect.options.length=1;
    
    for (var i of assetSortJson) {
        if (i.value.length == 7 && i.value.substr(0, 4) == selectedSort) {
            categorySelect.options.add(new Option(i.name, i.value, false, i.value == isSelected));
        }
    }
}

        这里我们就要用到刚才取出的json，然后再根据该分类的长度，把选项重新放入。其实可以用filter的功能，多存几个变量，这样就不用每次扫整个json了。

 

        4.

        

        这里呢就是效果图了，成了！