javascript实现二级级联菜单的简单制作

本文实例讲述了javascript实现二级级联菜单的简单制作方法。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head> 

 <title></title> 

 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript" src="../../js/jquery-1.11.1.js"></script>
 <style type="text/css">
  .body_tag{
   width: 100%;
   height: 100%;
  }
 </style>
 <script type="text/javascript">
  /**
   *
   */
   function province()
   {
    var proName = $("#areaName").val();
    $("#city").empty();
    $("#city").append("<option value='0'>全部</option>");
    if(proName == "1")
    {
     $("#city").append("<option value='1'>广州市</option>"+
         "<option value='2'>深圳市</option>"+
         "<option value='3'>中山市</option>");
    }
    if(proName == "2")
    {
     $("#city").append("<option value='1'>武汉市</option>"+
         "<option value='2'>黄石市</option>"+
         "<option value='3'>黄冈市</option>");
    }
   }
 </script>
 </head> 

 <body class="body_tag">
  <table id="tab">
   <tr>
   <td>
    <label for="areaName">省份：</label>
    <select id="areaName" onchange="province()">
     <option value="0">全国</option>
     <option value="1">广东</option>
     <option value="2">湖北</option>
    </select>
    <label for="city">地市：</label>
    <select id="city">
     <option value="0">全部</option>
    </select>
   </td>
   </tr>
  </table>
 </body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。