HTML代码

 

　　<selectid="s1">

 

　　<optionvalue="0">~请选择省份~</option>

 

　　<optionvalue="1">湖北省</option>

 

　　<optionvalue="2">江西省</option>

 

　　</select>

 

　　<selectname=""id="city">

 

　　<optionvalue="0">~请选择城市~</option>

 

　　</select>

 

　　JS代码

 

　　window.onload=function(){

 

　　//创建一个二维数组，存储城市

 

　　vararrCity=[["~请选择城市~"],["武汉市","黄冈市","襄阳市"],["南昌市","景德镇","九江市"]];

 

　　//给省份绑定onchange时间

 

　　s1.onchange=function(){

 

　　//1.获取你选择省份的value属性

 

　　varval=document.getElementById("s1").value;

 

　　//7.获取城市的元素节点

 

　　varcity=document.getElementById("city");

 

　　//9.每次触发onchang时间后将清空第二个下拉框的option内容

 

　　city.innerHTML="";

 

　　//2.遍历二维数组中的省份

 

　　for(vari=0;i<arrCity.length;i++){

 

　　//注意，比较的是角标

 

　　if(val==i){

 

　　//3.遍历选择省份下的城市

 

　　for(varj=0;j<arrCity[i].length;j++){

 

　　//4.添加option元素节点

 

　　varoption=document.createElement("option");

 

　　//5.添加文本节点

 

　　vartextNode=document.createTextNode(arrCity[i][j]);

 

　　//6.将文本节点添加到option元素节点中

 

　　option.appendChild(textNode);

 

　　//8.将元素节点添加到城市的元素节点下

 

　　city.appendChild(option);

 

　　}