javascript實現(xiàn)二級級聯(lián)菜單的簡單制作

更新時間：2015年11月19日 11:39:58 作者：翱翔天地

這篇文章主要介紹了javascript實現(xiàn)二級級聯(lián)菜單的簡單制作，感興趣的小伙伴們可以參考一下

本文實例講述了javascript實現(xiàn)二級級聯(lián)菜單的簡單制作方法。分享給大家供大家參考。具體如下：
運行效果截圖如下：

具體代碼如下：

<!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程序設計有所幫助。

您可能感興趣的文章:

js中iframe調用父頁面的方法
這篇文章主要介紹了js中iframe調用父頁面的方法,可通過window.parent.方法()來實現(xiàn),非常具有實用價值,需要的朋友可以參考下
2014-10-10
基于JavaScript構建高級視頻播放器
這篇文章主要為大家詳細介紹了如何基于JavaScript構建高級視頻播放器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04
JavaScript常用事件介紹
今天小編就為大家分享一篇關于JavaScript常用事件介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
JS創(chuàng)建Tag標簽的方法詳解
這篇文章主要介紹了JS創(chuàng)建Tag標簽的方法,結合具體實例形式分析了javascript動態(tài)操作頁面HTML元素實現(xiàn)tag標簽功能的步驟與相關操作技巧,需要的朋友可以參考下
2017-06-06
使用JavaScript計算當前時間前N個工作日的方法技巧
在Web開發(fā)中,處理日期和時間是常見的需求之一,特別是在金融、人力資源等領域,經(jīng)常需要計算特定的日期范圍或工作日,本文將深入探討如何使用JavaScript計算當前時間前N個工作日,并提供詳細的代碼示例和實際開發(fā)中的技巧,需要的朋友可以參考下
2025-02-02
利用try-catch判斷變量是已聲明未聲明還是未賦值
這篇文章主要介紹了利用try-catch判斷變量是已聲明未賦值還是未聲明,需要的朋友可以參考下
2014-03-03
一文詳解Electron 電源狀態(tài)管理
這篇文章主要為大家介紹了Electron 電源狀態(tài)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
js es6系列教程 - 基于new.target屬性與es5改造es6的類語法
下面小編就為大家?guī)硪黄猨s es6系列教程 - 基于new.target屬性與es5改造es6的類語法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js兩行代碼按指定格式輸出日期時間
javascript兩行代碼即可實現(xiàn)按指定格式輸出日期時間，非常不錯，需要的朋友可以參考下
2011-10-10
Javascript實現(xiàn)Array和String互轉換的方法
這篇文章主要介紹了Javascript實現(xiàn)Array和String互轉換的方法,涉及JavaScript中toString方法與split方法的使用技巧,需要的朋友可以參考下
2015-12-12