jq下拉框二级联动效果

最新推荐文章于 2022-04-06 21:45:53 发布

原创最新推荐文章于 2022-04-06 21:45:53 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jq下拉框二级联动效果

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

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

这里写图片描述

$(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);
            }
        });
    });
});