1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>二级联动菜单实现</title>
    6.     <script type="text/javascript" src="js/jquery.js"></script>
    7.     <script type="text/javascript">
    8.         $(function(){
    9.             $.ajax({
    10.                 "url":"http://192.168.4.127:8080/channel",
    11.                 "data":{"level":"1"},
    12.                 "type":"get",
    13.                 "dataType":"json",
    14.                 "success":function(json){
    15.                     console.log(json);
    16.                     for(var i=0;i<json.length;i++){
    17.                         var ch = json[i];
    18.                         $("#lv1").append("<option value='"+ ch.code +"'>"+ ch.name +"</option>");
    19.                     }
    20.                 }
    21.             })
    22.         })
    24.         $(function(){
    25.             $("#lv1").on("change",function(){
    26.                 var parent = $(this).val();
    27.                 console.log(parent);
    28.                 $.ajax({
    29.                     "url":"http://192.168.4.127:8080/channel",
    30.                     "data":{"level":"2","parent":parent},
    31.                     "dataType":"json",
    32.                     "type":"get",
    33.                     "success":function(json){
    34.                         console.log(json);
    35.                         //移除lv2下的所有原始options项
    36.                         $("#lv2>option").remove();
    37.                         for(var i=0;i<json.length;i++){
    38.                             var ch = json[i];
    39.                             $("#lv2").append("<option value='"+ ch.code +"'>"+ ch.name +"</option>");
    40.                         }
    41.                     }
    42.                 })
    43.             })
    44.         })
    45.     </script>
    46. </head>
    47. <body>
    48.     <select id="lv1" style="width: 200px;height: 30px;">
    49.         <option selected="selected">请选择</option>
    50.     </select>
    51.     <select id="lv2" style="width: 200px;height: 30px;">
    53.     </select>
    54. </body>
    55. </html>