HTML中使用js实现多级列表联动-实例省级列表联动

田小檬

发布于 2023-08-24 10:40:27

4110

发布于 2023-08-24 10:40:27

文章被收录于专栏：田小檬博客

实例

查看实例

HTML中使用js实现多级列表联动-实例省级列表联动

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省级列表多级联动</title>
</head>
<body>
    <form>
        <select id="province"><option value="-1">请选择</option></select>
        <select id="city"></select>
        <select id="country"></select>
    </form>
        <script type="text/javascript">
    var provinceArr = ["上海","江苏","河北","湖南"]
    var cityArr = [["上海市"],["苏州市","南京市"],["石家庄","秦皇岛"],["长沙","湘潭"]]
    var countryArr = [[["黄埔区","静安区"]],[["虎丘区","吴中区"],["玄武区","秦淮区"]],[["长安区","桥西区"],["海港区","山海关区"]],[["芙蓉区","岳麓区"],["湘潭区"]]]
    function createOption (obj,data) {
        for(var i in data){
            var op = new Option(data[i],i);
            obj.options.add(op)
        }
    }
    var province = document.getElementById("province");
    createOption(province,provinceArr);
var city = document.getElementById("city");
province.onchange=function(){
    city.options.length=0;
    createOption(city,cityArr[province.value]);
    if (province.value>=0){
        city.onchange();
    } else {
        country.options.length=0;}
};
var country = document.getElementById("country");
city.onchange=function(){
    country.options.length=0;
    createOption(country,countryArr[province.value][city.value]);
};

</script>
</body>
</html>

改动

有时ID并不是顺序的，优化的加入了id监听

<div class="form-group">
    <label>选择类目</label>
    <br>
    <select id="type1" class="custom-select form-control col-12 col-md-3 mt-3 mr-3" name="type1">
        <option value="-1">请选择</option>
    </select>

    <select id="type2" class="custom-select form-control col-12 col-md-3 mt-3 mr-3" name="type1">
        <option value="-1">请选择</option>
    </select>

    <select id="type3" class="custom-select form-control col-12 col-md-3 mt-3 mr-3" name="type1">
        <option value="-1">请选择</option>
    </select>

    <br>
    <input name="type1_id" id="type1_id" value="" hidden="didden" />
    <input name="type2_id" id="type2_id" value="" hidden="didden" />
    <input name="type3_id" id="type3_id" value="" hidden="didden" />

</div>
<script type="text/javascript">
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/app/post/get_type/",
        success: function(data, textStatus) {
            console.log(data);
            //{"type1":["日常劳务","电脑维修","家政劳务","灵活务工","木工劳务","装修工程","房屋维修","软件工程","物流预约","配送跑腿","烘焙劳务","餐饮劳务","租房业务","搬家劳务","装卸搬运","代办劳务","职业介绍","空调劳务","汽车劳务","维修开锁","建筑工程","互联网","婚庆劳务","闲置物资","农业劳务","电焊劳务","审车劳务"],"type1_id":[4,301,289,223,324,160,7,174,170,144,180,30,125,17,31,54,186,93,80,191,102,218,111,198,240,203,120],"type2":[["勤杂劳务","普工劳务"],["系统维修","硬件维修"],["保洁","保姆"],["普工劳务","技工劳务","电工劳务"],["木工活"],["家庭装修","房屋装修"],["室内维修","防水补漏"],["软件开发"],["货物运输"],["货车预约","跑腿预约"],["寻求技术"],["酒店服务","食堂快餐"],["房屋出租","求租房屋"],["搬家预约","厂房搬家"],["预约装卸","预约搬运"],["代办三证","代理记账"],["代理招聘"],["空调安装","空调维修"],["找代办审车","汽车维修"],["预约修锁"],["工地施工"],["信息技术预约"],["婚礼主持"],["预约回收"],["农忙用工"],["铁艺焊接"],["代办审车"]],"type2_id":[[5,315],[302,304],[290,292],[224,226,320],[325],[161,165],[8,11],[175],[171],[145,148],[181],[35,42],[126,208],[18,20],[32,47],[55,57],[187],[94,97],[81,86],[192],[103],[219],[112],[199],[241],[204],[258]],"type3":[[["任意工种","普工劳务","日结工资","小时工","计件工资","技工劳务","其他用工"],["勤杂帮工"]],[["远程维修","维修电脑"],["电路版维修","其他硬件","维修电脑","显示屏更换"]],[["打扫卫生","垃圾清理"],["照顾小孩","照顾老人","照顾家庭","月嫂","洗衣做饭"]],[["搬运工","勤杂工","其他","操作工","包装工"],["会计","财务管理","司机驾驶员","厨师","服务员","其他工种","其他人才","其他技术工"],["电路安装"]],[["家具制作","装修相关"]],[["住宅装修","楼房装修","其他装修","门窗安装"],["店面装修","车间装修","厂房装修","其他装修","铺地板","贴瓷砖"]],[["维修自来水管","其他设施维修","电路维修","门窗维修","投下水道","疏通下水道","电路维修","维修马桶","砸墙"],["屋顶漏水","室内防水","其他防水"]],[["寻求开发","程序员","软件维护","定制软件"]],[["我要发货","专线发货"]],[["配送货","提接货"],["两轮摩托","三轮车派送"]],[["面包配方","糕点配方","蛋糕配方","其他技术"]],[["后厨劳务","服务员","厨师","配菜工","洗碗工","打扫卫生","迎宾员","其他预约"],["打扫卫生","清洗菜","厨房帮工","服务员","配菜工","厨师"]],[["住房出租","厂房出租","仓库出租","商务房出租","门头出租","店面商铺出租"],["预约租住房","求租商铺","求租门头房","求租厂房","求租库房"]],[["住房搬家","其他搬家","厂房库房搬家","写字楼搬家"],["搬运设备","办公室搬家"]],[["人工装卸","叉车装卸","其他","出入库"],["卸车入库","出库装车","搬运工","其他","出入库"]],[["营业执照","食品经营许可证","生产许可证","其他证件"],["抄报税","开发票"]],[["招工信息","灵活用工"]],[["打空调眼","钻孔预约","空调移机"],["压缩机","线路维修","其他"]],[["小型汽车","货车年检","客车年审","其他车型","我要审车"],["上门补胎","救援维修","电瓶充电","拖车","维修汽车","其他维修"]],[["上门开锁","更换新锁"]],[["砌墙","脚架安装","工程外包","其他工程","刮腻子","水电安装","挖沟"]],[["信息发布","网站维护","网站建设"]],[["喜宴表演","节目表演","婚礼摄影"]],[["旧物出售","旧物置换","废品出售"]],[["收割水稻","作物种植","收割小麦","采摘玉米","耕地种植","庄稼收割","喷洒农药","灌溉庄稼","浇地灌溉","其他收割"]],[["护栏电焊","设备焊接","其他电焊"]],[["寻求代办"]]],"type3_id":[[[6,29,136,137,138,139,140],[316]],[[303,307],[305,306,308,322]],[[291,297],[293,294,295,296,298]],[[225,229,230,236,323],[227,228,231,232,233,234,235,238],[321]],[[326,327]],[[162,163,164,299],[166,167,168,169,196,197]],[[9,10,14,16,156,157,158,195,300],[12,13,15]],[[176,177,178,179]],[[172,173]],[[146,147],[149,150]],[[182,183,184,185]],[[36,37,38,39,40,41,67,239],[43,44,45,46,119,142]],[[127,128,129,130,131,132],[209,210,211,212,213]],[[19,215,216,217],[21,22]],[[34,33,73,74],[48,49,50,51,237]],[[58,59,60,61],[65,66]],[[188,190]],[[95,96,101],[98,99,100]],[[82,83,84,85,260],[87,88,89,90,91,92]],[[193,194]],[[104,105,106,107,108,109,110]],[[220,221,222]],[[113,116,118]],[[200,201,202]],[[242,243,244,245,246,247,248,249,250,252]],[[205,206,207]],[[259]]]}
            var type1Arr = data.type1
            var type2Arr = data.type2
            var type3Arr = data.type3

            var type1_idArr = data.type1_id
            var type2_idArr = data.type2_id
            var type3_idArr = data.type3_id

            var province = document.getElementById("type1");
            createOption(province, type1Arr);

            var city = document.getElementById("type2");
            province.onchange = function() {
                city.options.length = 0;
                createOption(city, type2Arr[province.value]);
                document.getElementById("type1_id").value = type1_idArr[province.value];
                document.getElementById("type2_id").value = type2_idArr[province.value][city.value];
                document.getElementById("type3_id").value = type3_idArr[province.value][city.value][country
                    .value
                ];
                if (province.value >= 0) {
                    city.onchange();
                } else {
                    country.options.length = 0;
                }
            };
            var country = document.getElementById("type3");
            city.onchange = function() {
                country.options.length = 0;
                createOption(country, type3Arr[province.value][city.value]);
                document.getElementById("type2_id").value = type2_idArr[province.value][city.value];
                document.getElementById("type3_id").value = type3_idArr[province.value][city.value][country
                    .value
                ];
            };

            var country = document.getElementById("type3");
            country.onchange = function() {
                document.getElementById("type3_id").value = type3_idArr[province.value][city.value][country
                    .value
                ];
            };

        }
    })

    function createOption(obj, data) {
        for (var i in data) {
            var op = new Option(data[i], i);
            obj.options.add(op)
        }
    }
</script>

function get_type(){
    $goods_type = db::name('goodstype')->where('p_id = 0 and is_del = 0 and is_tui = 1')->field('id,classname')->order('orderid asc')->select();
    foreach ($goods_type as $key => $value) {
        $city = db::name('goodstype')->where('p_id',$value['id'])->where('pp_id',0)->where('is_del',0)->field('id,classname')->select();
        foreach ($city as $ke => $val) {
            $area = db::name('goodstype')->where('pp_id = '.$val['id'].' and is_del = 0')->field('id,classname')->select();
            $city[$ke]['three'] = $area;
        }
        $goods_type[$key]['two'] = $city;
    }
    
    foreach ($goods_type as $key => $value) {
        $list['type1'][$key] = $value['classname'];
        $list['type1_id'][$key] = $value['id'];
        foreach ($value['two'] as $type2_key => $type2_value) {
            $list['type2'][$key][$type2_key] = $type2_value['classname'];
            $list['type2_id'][$key][$type2_key] = $type2_value['id'];
            foreach ($type2_value['three'] as $type3_key => $type3_value) {
                $list['type3'][$key][$type2_key][$type3_key] = $type3_value['classname'];
                $list['type3_id'][$key][$type2_key][$type3_key]  = $type3_value['id'];
            }
        }
    }
    return json($list);
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-22，如有侵权请联系 cloudcommunity@tencent.com 删除

html