jq下拉框二级联动效果

一时失言乱红尘 2023-10-17 17:19 25阅读 0赞

## jq下拉框二级联动效果 ##

##### select标签下拉触发二级联动效果 #####

> 项目需求：根据财务科目级别联动相应级别的财务科目列表，效果图如下：

![这里写图片描述][SouthEast]

$(document).ready(function() {
        
        //科目级别下拉选择触发事件
        $('#level').change(function(){
        
            var level = $(this).children('option:selected').val();
            if(level==null||level==""||level=="1"){
                $('#pids select').remove();
                $('#pids').html(pidContent);
                $('input#subjectId').val(subjectIdValue);
                $('input#direction').val(directionValue);
                $('input#finalSwap').val(finalSwapValue);
                if(level=="1"){
                    alert("不可建立一级科目,请选择其他级别");
                    $("#level").find("option[value='"+ selectedValule +"']").attr("selected",true);
                }
                return;
            }
            $.ajax({
                //把url改成你服务器接口的url
                url: "${ctx}/budget/financeAllSubject/level?levelId=" + level,
                type:'GET',
                dataType: 'text',
                success:function(str){
        
                    var arr = eval(str);
                    var content = '<select id="pid" name="pid" onchange="changePid(this)" class="form-control required"><option value="">---请选择父级科目代码---</option>';
                    for(var i = 0; i<arr.length; i++){
                        content += '<option value="' + arr[i] + '">' + arr[i] + '</option>';
                    }
                    content += '</select>';
                    $('#pids input').remove();
                    $('td#pids').html(content);
                },
                error:function (err){
        
                    //todo somethining..
                    alert(err);
                }
            });
        });
    });

[SouthEast]: https://img-blog.csdn.net/20171204112602095?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMTY1NzA2MDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast