DDR爱好者之家

JavaScript实现三级联动菜单实例代码
站长资源 2024/11/27 佚名
23 1538
DDR爱好者之家 Design By 杰米

本文给大家分享的是使用javascript实现的一个简单的三级联动菜单，非常简单实用，有需要的小伙伴过来参考下吧。

用javascript制作的一个简单三级联动，非常简单实用

<!DOCTYPE html>

<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  省：
  <select style="width: 100px;" id="pre" onchange="chg(this);">
   <option value="-1">请选择</option>
  </select>
  市：
  <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
  区：
  <select style="width: 100px;" id="area"></select>
 </body>
 <script>

   //声明省
  var pres = ["北京", "上海", "山东"]; //直接声明Array
   //声明市
  var cities = [

   ["东城", "昌平", "海淀"],
   ["浦东", "高区"],
   ["济南", "青岛"]
  ];

  var areas = [

    [
     ["东城1", "东城2", "东城3"],
     ["昌平1", "昌平2", "昌平3"],
     ["海淀1", "海淀2", "海淀3"]
    ],

    [
     ["浦东1", "浦东2", "浦东3"],
     ["高区1", "高区2", "高区3"]

    ],

    [
     ["济南1", "济南2"],
     ["青岛1", "青岛2"]
    ]

   ]

   //设置一个省的公共下标

  var pIndex = -1;
  var preEle = document.getElementById("pre");
  var cityEle = document.getElementById("city");
  var areaEle = document.getElementById("area");
   //先设置省的值

  for (var i = 0; i < pres.length; i++) {
   //声明option.<option value="pres[i]">Pres[i]</option>
   var op = new Option(pres[i], i);
   //添加
   preEle.options.add(op);
  }

  function chg(obj) {
   if (obj.value == -1) {
    cityEle.options.length = 0;
    areaEle.options.length = 0;
   }

   //获取值
   var val = obj.value;
   pIndex = obj.value;
   //获取ctiry
   var cs = cities[val];
   //获取默认区
   var as = areas[val][0];
   //先清空市
   cityEle.options.length = 0;
   areaEle.options.length = 0;
   for (var i = 0; i < cs.length; i++) {
    var op = new Option(cs[i], i);
    cityEle.options.add(op);

   }

   for (var i = 0; i < as.length; i++) {
    var op = new Option(as[i], i);
    areaEle.options.add(op);

   }

  }

  function chg2(obj) {
   var val = obj.selectedIndex;
   var as = areas[pIndex][val];
   areaEle.options.length = 0;
   for (var i = 0; i < as.length; i++) {

    var op = new Option(as[i], i);

    areaEle.options.add(op);

   }

  }

 </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米