js版本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js版本的省市联动</title> <script> window.onload=function(){ var city=document.getElementById("city"); city.onchange=function(){ var options=document.getElementsByTagName("option"); for(var i=0;i<options.length;i++){ if(options[i].selected){ var val=options[i].value; switch(val){ case "gz": var area=document.getElementById("area"); area.innerHTML="<option>深圳市</option>"+ "<option>东菀市</option>"+ "<option>惠州市</option>"+ "<option>广州市</option>"; break; case "hn": var area=document.getElementById("area"); area.innerHTML="<option>长沙市</option>"+ "<option>岳阳市</option>"+ "<option>株洲市</option>"+ "<option>湘潭市</option>"; break; case "fj": var area=document.getElementById("area"); area.innerHTML="<option>厦门市</option>"+ "<option>福州市</option>"+ "<option>漳州市</option>"+ "<option>泉州市</option>"; break; } } } }; }; </script> </head> <body> <select id="city"> <option value="gz">广东省</option> <option value="hn">湖南省</option> <option value="fj">福建省</option> </select> <select id="area"> <option>深圳市</option> <option>东菀市</option> <option>惠州市</option> <option>广州市</option> </select> </body> </html>
jquery版本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery-省市联动</title> <script src="../../js/jquery-1.4.2.js"></script> <script src="../../js/jquery-1.8.3.js"></script> <script> $(document).ready(function(){ var $city=$("#city"); //监听改变事件 $city.change(function(){ var $val=$("#city option:selected").val(); switch($val) { case "gz": $("#area").html("<option>深圳市</option>"+ "<option>东菀市</option>"+ "<option>惠州市</option>"+ "<option>广州市</option>"); break; case "hn": $("#area").html("<option>长沙市</option>"+ "<option>岳阳市</option>"+ "<option>株洲市</option>"+ "<option>湘潭市</option>"); break; case "fj": $("#area").html("<option>厦门市</option>"+ "<option>福州市</option>"+ "<option>漳州市</option>"+ "<option>泉州市</option>"); break; } }); }); </script> </head> <body> <select id="city"> <option value="gz">广东省</option> <option value="hn">湖南省</option> <option value="fj">福建省</option> </select> <select id="area"> <option>深圳市</option> <option>东菀市</option> <option>惠州市</option> <option>广州市</option> </select> </body> </html>