标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>实现省市二级联动</title> <script> //思路： 找对象 找事件 实现相应的事件处理程序 var province = [‘请选择‘,‘广东省‘,‘湖南省‘,‘湖北省‘]; var city = [[],[‘广州市‘,‘深圳市‘,‘东莞市‘],[‘长沙‘,‘株洲‘,‘湘潭‘],[‘武汉市‘,‘咸宁市‘,‘天门市‘]]; //获取DOM对象 function $(id) { return document.getElementById(id); } //获取（遍历）省下拉列表 function createProvince() { for(var i = 0;i<province.length;i++) { var op = new Option(province[i],province[i]); $(‘province‘).options.add(op); } } //获取（遍历）市下拉列表 function createCity() { //获取被选中的省索引 var index = $(‘province‘).selectedIndex; //清空下拉列表 $(‘city‘).length = 0; for(var i = 0;i < city[index].length;i++) { var op = new Option(city[index][i],city[index][i]); $(‘city‘).options.add(op); } } window.onload = function() { createProvince(); //状态改变事件 $(‘province‘).onchange = createCity; } </script> </head> <body> 省：<select id=‘province‘></select> 市：<select id=‘city‘></select> </body> </html>
标签：
原文地址：http://www.cnblogs.com/lesuso/p/4860595.html
