级联菜单

本文章讲述如何写一个省市区关联菜单插件，只是简单的实现，代码有不成熟之处，请自行判断。

1)用户需要自行添加一个div容器并添加样式，封装好省市区数组，然后将容器的Id和数组作为参数传入，如下所示

<style>

    .content{
        width: 500px;
        height: 300px;
        background-color: lightblue;
        margin: 0 auto;
    }
    .content div{
        float: left;
    }

</style>

<div class="content" id="content"></div>
<script src="js/级联菜单.js"></script>
<script>

    function getData(){
        var p1c1Part1=["莱山区","芝罘区","福山区","牟平区","栖霞市"];
        var p1c2Part2=["市南区","市北区","四方区","黄岛区","崂山区","城阳区"];
        var p1City1={name:"烟台市",part:p1c1Part1};
        var p1City2={name:"青岛市",part:p1c2Part2};
        var p1City=[p1City1,p1City2];
        var province1={name:"山东省",city:p1City};
        var p2c1Part1=["沧浪区","平江区","虎丘区","吴中区","吴江市"];
        var p2c2Part2=["云龙区","鼓楼区","九里区","泉山区"];
        var p2City1={name:"苏州市",part:p2c1Part1};
        var p2City2={name:"徐州市",part:p2c2Part2};
        var p2City=[p2City1,p2City2];
        var province2={name:"江苏省",city:p2City};
        var array=[province1,province2];
        return array;
    }
    initMenu(getData(),"content");
</script>

2)下面开始封装js代码，首先需要定义一个初始化方法并获取传入的参数，因为我是利用innerHTML的方式来写入，所以为了避免覆盖，需要将用户传入的容器分区，分成三个小的div。

/**
 * Created by GZN on 2017/8/5.
 */


var array;
var nowCity;

function initMenu(arr,id){
    array=arr;
    var div=document.getElementById(id);
    div.innerHTML=" <div id='left' style='width: 33%;height: 300px;'></div> <div id='center' style='width: 33%;height: 300px;'></div><div id='right' style='width: 33%;height: 300px;'></div>"；

//初始化一下省市区。

var leftDiv= document. getElementById( "left"); leftDiv. innerHTML= createSelect( array, true); document. getElementsByTagName( "select")[ 0]. onchange= getCity; getCity( document. getElementsByTagName( "select")[ 0]); getPart( document. getElementsByTagName( "select")[ 1]); }

var nowCity;//将当前城市作为全局变量，方便获取下一级菜单

function getCity(cell){     if(cell==event)cell= cell.target;//判断传入的是事件因子还是对象，都将其转换为对象     var index=cell.selectedIndex-0;//获取被选择的option的下标，并通过减0将其从字符串转化为整型     nowCity=array[index].city;     var centerDiv=document.getElementById("center");     centerDiv.innerHTML=createSelect(nowCity,true);     document.getElementsByTagName("select")[1].onchange=getPart;//给select添加事件 }

function getPart(cell){ if(cell== event)cell= cell. target; var index=cell. selectedIndex- 0; var part= nowCity[ index]. part; var rightDiv= document. getElementById( "right"); rightDiv. innerHTML= createSelect( part, false); }

给div添加select标签，通过遍历数组，来获取应该添加的option的数量和值。由于每一个div都需要这个步骤，所以可以将其封装为一个方法，方便调用；

function createSelect(array,flag){     var str=" <select style='width: 80%;margin: 10% 10%;'> ";     for(var i=0;i<array.length;i++){

//flag是为了判断数组里存的是对象还是值，比如第三级菜单的数组里就是一个名字而不是对象         if(flag){             str+=" <option value='"+array[i].name+"'> "+array[i].name+"</option> ";         }         else{             str+=" <option value='"+array[i]+"'> "+array[i]+"</option> ";         }     }     str+="</select> ";     return str; }