欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现三级联动菜单实例代码

程序员文章站 2024-01-30 10:30:28
本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧。 用javascript制作的一个简单三级联动,非常简单...

本文给大家分享的是使用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>

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