html点击三级菜单代码,JavaScript实现三级联动菜单实例代码

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

用Javascript制作的一个简单三级联动&＃xff0c;非常简单实用

省&＃xff1a;

请选择

市&＃xff1a;

区&＃xff1a;

//声明省

var pres &＃61; ["北京", "上海", "山东"]; //直接声明Array

//声明市

var cities &＃61; [

["东城", "昌平", "海淀"],

["浦东", "高区"],

["济南", "青岛"]

];

var areas &＃61; [

[

["东城1", "东城2", "东城3"],

["昌平1", "昌平2", "昌平3"],

["海淀1", "海淀2", "海淀3"]

],

[

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

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

],

[

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

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

]

]

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

var pIndex &＃61; -1;

var preEle &＃61; document.getElementById("pre");

var cityEle &＃61; document.getElementById("city");

var areaEle &＃61; document.getElementById("area");

//先设置省的值

for (var i &＃61; 0; i

//声明option.Pres[i]

var op &＃61; new Option(pres[i], i);

//添加

preEle.options.add(op);

}

function chg(obj) {

if (obj.value &＃61;&＃61; -1) {

cityEle.options.length &＃61; 0;

areaEle.options.length &＃61; 0;

}

//获取值

var val &＃61; obj.value;

pIndex &＃61; obj.value;

//获取ctiry

var cs &＃61; cities[val];

//获取默认区

var as &＃61; areas[val][0];

//先清空市

cityEle.options.length &＃61; 0;

areaEle.options.length &＃61; 0;

for (var i &＃61; 0; i

var op &＃61; new Option(cs[i], i);

cityEle.options.add(op);

}

for (var i &＃61; 0; i

var op &＃61; new Option(as[i], i);

areaEle.options.add(op);

}

}

function chg2(obj) {

var val &＃61; obj.selectedIndex;

var as &＃61; areas[pIndex][val];

areaEle.options.length &＃61; 0;

for (var i &＃61; 0; i

var op &＃61; new Option(as[i], i);

areaEle.options.add(op);

}

}

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。