动态二级联动

<!DOCTYPE html><html lang="en">    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="./jquery-3.5.1.min.js"></script></head><body>    <select id="province">        <option value="">请选择</option>    </select>    <select id="city"></select></body><script>       var pro  = document.getElementById("province");       var city = document.getElementById("city");    t =   [                {                    "SXGLS": [{ "SXGL": "用户密级" }, { "SXGL": "用户列表" }],                    "GNMK": "限制利用管理"                },                {                    "SXGLS": [{ "SXGL": "宗地基本信息" }, { "SXGL": "房地产权2" }, { "SXGL": "查封登记" }, { "SXGL": "异议登记" }, { "SXGL": "抵押登记" }],                    "GNMK": "按坐落查询"                },                {                    "SXGLS": [{ "SXGL": "异议登记" }, { "SXGL": "房地产权2" }, { "SXGL": "建设用地使用权" }, { "SXGL": "查封登记" }, { "SXGL": "房地产权3" }, { "SXGL": "注记查询" }, { "SXGL": "土地所有权" }, { "SXGL": "权利人查询" }, { "SXGL": "抵押登记" }, { "SXGL": "宗地基本信息" }, { "SXGL": "注记信息" }],                    "GNMK": "详细信息查询"                },                {                    "SXGLS": [{ "SXGL": "房地产权2" }, { "SXGL": "抵押登记" }, { "SXGL": "异议登记" }, { "SXGL": "建设用地使用权" }],                    "GNMK": "按登记字号查询"                },                {                    "SXGLS": [{ "SXGL": "查无证明" }],                    "GNMK": "打印查无证明"                },                {                    "SXGLS": [{ "SXGL": "建设用地使用权" }, { "SXGL": "抵押登记" }, { "SXGL": "房地产权2" }],                    "GNMK": "按单位查询"                },                {                    "SXGLS": [{ "SXGL": "房地产权3" }, { "SXGL": "异议登记" }, { "SXGL": "查封登记" }, { "SXGL": "建设用地使用权" }, { "SXGL": "抵押登记" }, { "SXGL": "宗地基本信息" }, { "SXGL": "房地产权2" }, { "SXGL": "土地所有权" }],                    "GNMK": "按不动产单元号查询"                },                {                    "SXGLS": [{ "SXGL": "注记查询" }],                    "GNMK": "注记信息查询"                },                {                    "SXGLS": [{ "SXGL": "注记查询" }],                    "GNMK": "注记信息查询(单案)"                },                {                    "SXGLS": [{ "SXGL": "土地所有权" }, { "SXGL": "异议登记" }, { "SXGL": "抵押登记" }, { "SXGL": "建设用地使用权" }, { "SXGL": "查封登记" }, { "SXGL": "房地产权2" }],                    "GNMK": "按不动产权证号查询"                }            ]var pro  = document.getElementById("province");var city = document.getElementById("city");       // 处理一级数据for(var i in t){    // console.log(t[i].GNMK)    var option_pro = document.createElement("option");        option_pro.innerHTML= t[i].GNMK;        pro.appendChild(option_pro);    }$('#province').change( function func1(){        // console.log((this.options[this.selectedIndex]).innerHTML);                // 选择当前定位的一级        var choice = (this.options[this.selectedIndex]).innerHTML;        // 删除再次选择后出现上一次的数据        var options = city.children;        console.log(options)        for (var k=0; k<options.length; k++){            // console.log(k)            city.removeChild(options[k--]);        }        // 处理二级数据      for(var i in t ){        for(var k in t[i].SXGLS){            console.log(t[i].GNMK)            if(t[i].GNMK == choice ){           var option_city = document.createElement("option");           option_city.innerHTML = t[i].SXGLS[k].SXGL;           city.appendChild(option_city);            }                  }      }     }) </script></html>
    posted @   前端搬运工bug  阅读(22)  评论(0编辑  收藏  举报
    相关博文:
    阅读排行:
    · 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
    · 使用C#创建一个MCP客户端
    · ollama系列1:轻松3步本地部署deepseek,普通电脑可用
    · 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
    · 按钮权限的设计及实现
    点击右上角即可分享
    微信分享提示