动态二级联动

<!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 @ 2022-06-20 16:32  前端搬运工bug  阅读(21)  评论(0编辑  收藏  举报