html源码代码：
<!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=utf-8" /><title>ajax json jquery 菜单案例</title><style type="text/css">*{margin:0;padding:0;} ???body { font-size: 13px; line-height: 130%; padding: 60px }</style><link rel="stylesheet" type="text/css" href="../css/style.css"/><script src="../js/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function(){$("#first").change(function() {var id=document.getElementById("first").value; $.ajax({ ????type: "POST", ????url: "../data/menu.json", ????dataType: "json", ???success: function(data) { ???????var secondRoot=document.getElementById("second"); ???????secondRoot.innerHTML=null; ???????for(var i=0;i<data.length;i++) ???????{ ???????????if(data[i].cid==id) ???????????{ ???????????????for( var j=0;j<data[i].cname.length;j++) ???????????????{ ???????????????????var op = document.createElement("option"); ???????????????????op.innerHTML=(data[i].cname)[j]; ???????????????????secondRoot.appendChild(op); ???????????????} ???????????} ???????} ???}, ???error:function(data){ ???????alert(data); ???} ???});});}); ??</script></head><body> ??<select name="first" id="first" style="width:160px"> ???????<option value="0">---请选择---</option> ???????<option value="1" >中国</option> ???????<option value="2">美国</option> ???????<option value="3">英国</option> ???</select> ???<select name="second" id="second" size="3" style="width:160px"></select></body></html>json源代码
[ ???{ ???????"cid": "2", ???????"cname": [ ???????????"子菜单1", ???????????"子菜单1", ???????????"子菜单1" ???????] ???}, ???{ ???????"cid": "1", ???????"cname": [ ???????????"子菜单2", ???????????"子菜单2", ???????????"子菜单2" ???????] ???}, ???{ ???????"cid": "3", ???????"cname": [ ???????????"子菜单3", ???????????"子菜单3", ???????????"子菜单3" ???????] ???} ???]json文件_ajax
原文地址：http://www.cnblogs.com/excellencesy/p/7905565.html