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="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="160px"></select> </body> </html>
json源代码
[ { "cid": "2", "cname": [ "子菜单1", "子菜单1", "子菜单1" ] }, { "cid": "1", "cname": [ "子菜单2", "子菜单2", "子菜单2" ] }, { "cid": "3", "cname": [ "子菜单3", "子菜单3", "子菜单3" ] } ]