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.

        

        這里呢就是效果圖了，成了！