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

2019-11-20 11:13:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：Jquery实现仿京东商城省市联动菜单

下一篇：jquery通过扩展select控件实现支持enter或focus选择的方法