省市联动_简单的Demo，适用于各种二级菜单联动

最近搞了一个功能，是查询页面需要用到二级菜单联动，获取到选中的属性value传入到后台。

平常都是用AJAX或者JQuery ,通过XML或者JSON的方式，这样的话需要调用数据库，像典型得到省市联动或者省市县三级等，一般这样的数据会有一张单独的数据表，

需要用的话，通过查询数据库获得相应的数据，返回一个JSNO，在前台进行处理显示。

但是这个功能没有单独的表，总共七个一级菜单，每个一级菜单下对应N个二级菜单，考虑到数据量不大，没有必要去改变原有的数据库表结构，就想到了用简单的JS去实现这个需求。

废话不多话，代码如下：

jsp部分代码：

<form action="" name="form1">
           <select name="province" id="province" onChange="getChild()">
            <option>== 请选择省份 ==</option>
            <option>北京市</option>
            <option>山西省</option>
            <option>山东省</option>
            <option>河北省</option>
            <option>河南省</option>
        </select>
        
        <select name="city" class="city">
            <option>== 请选择市区 ==</option>
        </select>
   </form>

JS代码：

 

<script type="text/javascript">
        //二级联动
        //定义城市数组
        var ctiyList = [
           ["东城区","西城区","朝阳区","丰台区","海淀区","昌平区"],
           ["太原市","大同市","运城市","临汾市","忻州市","晋中市"],
           ["济南市","青岛市","威海市","烟台市","临沂市","德州市"],
           ["石家庄市","邢台市","保定市"],
           ["郑州市","焦作市","三门峡市"],
         ];
        //点击选择框触发得到方法
        function getChild(){
            var sltProvince = document.form1.province;//获取name为form1下province
            var sltCity = document.form1.city;//获取name为form1下city
            var pc=ctiyList[sltProvince.selectedIndex - 1]; //省份列表下标要和城市列表下标一致
            sltCity.length=1;//每次选择都清空城市列表
            //遍历根据省份下标与之对应的城市下标
            for(var i=0;i<pc.length;i++){
                sltCity[i+1]=new Option(pc[i],pc[i]);    
            }
        }
    </script>