js如何实现三级联动效果-创新互联

小编给大家分享一下js如何实现三级联动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站设计、做网站、莆田网络推广、微信平台小程序开发、莆田网络营销、莆田企业策划、莆田品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供莆田建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

示例代码如下:




  
  



  


  


  


  var oone=document.getElementById("one");
  var otwo=document.getElementById("two");
  var three=document.getElementById("three");
  var str='';
  otwo.disabled=true;
  three.disabled=true;
  var arr1=[{"id":"1","value":"北京"},{"id":"2","value":"上海"},{"id":"3","value":"重庆"},{"id":"4","value":"天津"},{"id":"5","value":"山东"}];
  for(var i=0;i"+arr1[i].value+""
  }
  oone.innerHTML=str;
  var arr2 = {
    '1':['101@北京'],
    '2':['201@上海'],
    '3':['301@重庆'],
    '4':['401@天津'],
    '5':['501@济南','502@青岛']  };
  oone.onchange=function(){
    var val=this.value;
    var arrA = arr2[val];
    var str1='';
    for(var j=0;j"+aaa[1]+""
    }
    otwo.innerHTML=str1;
    otwo.disabled=false;
    three.innerHTML='';
    three.disabled='disabled';
  }
  var arr3 = {
    '101':['朝阳区','昌平区'],
    '201':['宝山区','浦东区'],
    '301':['不知道'],
    '401':['真的不知道'],
    '501':['市中区','历下区','槐荫区'],
    '502':['市南区','市北区','崂山区']  };
  otwo.onchange = function(){
    var val=this.value;
    console.log( this.value);
    var str2='';
    console.log(val)
    for(var l=0;l"
    }
    three.innerHTML=str2;
    three.disabled=false;
  }


以上是“js如何实现三级联动效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:js如何实现三级联动效果-创新互联
分享链接:http://pwwzsj.com/article/dejhoj.html