jQuery动态二级联表

最新推荐文章于 2022-04-20 23:00:20 发布

camma

最新推荐文章于 2022-04-20 23:00:20 发布

阅读量147

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_42594968/article/details/118398354

版权

效果图

在这里插入图片描述

代码

 $.ajax({
        type:"POST",
        url:"url",
        async:false,
        cache: false,
        dataType:"json",
        beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("Access-Control-Allow-Origin", "*");},
        success:function (data){

            let List = data.result;

            for(var i=0;i<data.species.length;i++) {
                var speciesName = data.species[i];
                $('#select_species').append("<option value='" + speciesName + "'>" + speciesName + "</option>");
            }

            //第一个Sample
            $('#select_species').change(function (){

                for (var i in List){
                //当前选择数据等于List数据key
                    if ($('#select_species option:selected').val()==i){
                        $('#select_SampleId').empty();//清空上次数据
                        $('#select_SampleId').append("<option style='color: lightgray'>Please choose &nbsp;&nbsp;&nbsp;</option>");
                        for (var j=0;j<List[i].length;j++){
                            let sampleID = List[i][j];
                            $('#select_SampleId').append("<option value='" + sampleID + "'>" + sampleID + "</option>");
                        }

                    }
                }
            })
     })