四级下拉菜单联动

最新推荐文章于 2021-06-10 13:11:14 发布

崔星灿

最新推荐文章于 2021-06-10 13:11:14 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：操作篇

本文链接：https://blog.youkuaiyun.com/m0_37661081/article/details/73560383

操作篇专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript的行业分类联动选择器的实现方法。该选择器包括四个级联的下拉菜单，分别对应不同的行业类别及其细分领域。通过预定义的数据结构和动态生成选项的方式，实现了用户在不同级别间的选择与联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.html:

第1级：

 <select  id="parent" onchange="clickOpt($(this).val())">
        <option value="">请选择</option>
        <option value="I">信息传输、软件和信息技术服务业</option>
        <option value="J">金融业</option>
        <option value="K">房地产业</option>
        <option value="L">租赁和商务服务业</option>
        <option value="M">科学研究和技术服务业</option>
        <option value="O">居民服务、修理和其他服务业</option>
        <option value="P">教育</option>
    </select>
   <br>
    <select  id="child1" onchange="clickOpt1(2,$(this).val(),list3[$(this).val()])">
       <option value="">请选择</option>
    </select>
    <br>

    <select  id="child2" onchange="clickOpt1(3,$(this).val(),list4[$(this).val()])">
       <option value="">请选择</option>
    </select>
    <br>

    <select  id="child3">
       <option value="">请选择</option>
    </select>

二：js

准备数据：

//第2级

var list2 = {'I':['64','65'],'J':['66','69'],'K':['70','71'],'L':['72'],'M':['74'],'O':['79','81'],'P':['82']};
var list2_ = {'64':'互联网和相关服务','65':'软件和信息技术服务业','66':'货币金融服务','69':'其他金融业','70':'房地产业','71':'租赁业','72':'商务服务业','74':'专业技术服务业','79':'居民服务业','81':'其他服务业','82':'教育'};

// 第3级
var list3 = {'64':['642','649'],'65':['659','651'],'66':['663'],'69':['691','693'],'70':['703'],'71':['712'],'72':['723','727','729'],'74':['749'],'79':['791','799'],'81':['819'],'82':['829']};
var list3_ = {'642':'互联网信息服务','649':'其他互联网服务','651':'软件开发','659':'其他信息技术服务业','663':'非货币银行服务','691':'金融信托与管理服务','693':'非金融机构支付服务','703':'房地产中介服务','712':'文化及日用品出租','723':'咨询与调查','727':'旅行社及相关服务','729':'其他商务服务业','749':'其他专业技术服务业','791':'家庭服务','799':'其他居民服务业','819':'其他未列明服务业','829':'技能培训、教育辅助及其他教育'};

//第4级
var list4 = {'642':['6420'],'649':['6490'],'651':['6510'],'659':['6599'],'663':['6631','6633'],'691':['6910'],'693':['6930'],'703':['7030'],'712':['7129'],'723':['7239'],'727':['7279'],'729':['7299'],'749':['7491','7499'],'791':['7910'],'799':['7990'],'819':['8190'],'829':['8299']};
var list4_ = {'6420':'互联网信息服务','6490':'其他互联网服务','6510':'软件开发','6599':'其他未列明信息技术服务业','6631':'金融租赁服务','6633':'典当','6910':'金融信托与管理服务','6930':'非金融机构支付服务','7030':'房地产中介服务','7129':'其他文化及日用品出租','7139':'其他专业咨询','7279':'其他旅行社相关服务','7299':'其他未列明商务服务业','7491':'专业化设计服务','7499':'其他未列明专业技术服务业','7910':'家庭服务','7990':'其他居民服务业','8190':'其他未列明服务业','8299':'其他未列明教育'};

var default_ = '<option value="">请选择</option>';

function clickOpt(num){
    var html1=default_;
     $.each(list2[num],function(key,val){
        html1 += '<option value="'+val+'">'+list2_[val]+'</option>';
         $('#child1').html(html1);
      });
     $('#child2').html(default_);
     $('#child3').html(default_);
     $('#child4').html(default_);
   
}

function clickOpt1(num,v,list){
    var html2=default_;
     var arr = list3_;
     if(3==num){
       arr = list4_;
     }
     $.each(list,function(key3,val3){
        html2 += '<option value="'+val3+'">'+arr[val3]+'</option>';
         $('#child'+num).html(html2);
      });
   
}