html5地区下拉菜单,JS特效：地区下拉菜单

可变的下拉菜单是网页中非常常见的一项功能，现在给大家做一个非常简单的实现，原理很简单，本质就是元素的显示与隐藏。代码如下大家试试。

HTML

西安市

铜川市

宝鸡市

未央区

莲湖区

新城区

碑林区

雁塔区

耀州区

王益区

印台区

宜君县

金台区

渭滨区

千阳县

眉　县

凤　县

JS

window.onload = function() {

var shaanxi = document.getElementById("shaanxi");

var select = document.getElementsByTagName("select");

var selected = 1;

shaanxi.onchange = function() {

select[selected].style.display = "none";

select[this.value].style.display = "inline";

selected = this.value;

}

};

在JS代码中增加了一个变量用来保存选中的市对应的value值，这个值正好与select标签选出的数组的下标一致，所以实现非常简单。大家试一下。