<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #_body { } </style> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> var json = { "河北省": ["石家庄", "邯郸", "保定"], "河南省": ["郑州", "洛阳", "安阳"], "山东省": ["济南", "青岛", "德州"] } $(function () { loadPro(json); }) function loadPro(json) { var $select = $("#province"); for (var key in json) { var $option = $("<option>" + key + "</option>") $select.append($option); } } function loadcity() { //1.获取当前选择的值,2,遍历3,添加 var $pro = $("#province"); var $city = $("#city"); var key_v = $pro.val(); var citys = json[key_v]; var city = $city.get(0); city.innerHTML = ""; for (var i = 0; i < citys.length; i++) { var $option = $("<option>" + citys[i] + "</option>") $city.append($option); } } </script> </head> <body id="_body"> <select id="province" onchange="loadcity()"> </select> <br /> <select id="city"> </select> </body> </html>