<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>带下拉列表的输入框 - 分享JavaScript-sharejs.com</title> </head> <body> <script> function on_click() { switch(document.form.province.value){ case "请选择省份": var city=new Array("请选择市区"); break; case "山东": var city=new Array("德州","济南","菏泽","聊城"); break; case "北京": var city=new Array("顺义","东城","崇文区","朝阳区","丰台区","石景山","略"); break; case "河北": var city=new Array("石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口"); break; } // document.form.pro_city.options.length=0;//pro_city的长度定义成0 for(var i=0;i<city.length+2;i++) { document.form.pro_city.options[i]=new Option(city[i],city[i-1]); //if(document.form.pro_city.options[i].value==" ")//选项是空，判断 //document.form.pro_city.selectedIndex=i; } } </script> <form name="form" method="post" action=""> <select style="width=20px" name="province" onchange="on_click()"> <option selected="selected"> 请选择省份</option> <option>山东</option> <option>北京</option> <option >河北</option> </select> <select name="pro_city" style="width=20px"> <option selected="selected">请选择市区</option> </select> </form> </body> </html>