JavaScript實現(xiàn)的聯(lián)動菜單特效示例

更新時間：2019年07月08日 10:43:44 作者：webbc

這篇文章主要介紹了JavaScript實現(xiàn)的聯(lián)動菜單特效,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)的聯(lián)動菜單特效。分享給大家供大家參考，具體如下：

博主昨天發(fā)布了一篇關于JavaScript特效的文章，今天呢給大家?guī)砺?lián)動菜單特效，這可能是一個系列哦！

效果圖

和以前一樣，先發(fā)效果圖，然后在進行講解。

代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <link rel="stylesheet" href="">
</head>
<body>
 <h1>聯(lián)動菜單</h1>
 <select id="province" onchange="ld();">
  <option value="-1">請選擇</option>
  <option value="0">安徽</option>
  <option value="1">浙江</option>
 </select>
 <select id="city">
 </select>
</body>
<script>
 //定義地區(qū)數(shù)組
 var area = [
  ['安慶','黃山','合肥'],
  ['杭州','溫州','寧波']
 ];
 //聯(lián)動函數(shù)
 function ld(){
   var province = document.getElementById('province');//找到省對象
   var city = document.getElementById('city');//找到市對象
   var opt = '';
   //如果是請選擇，就顯示空，并結束函數(shù)
   if(province.value == -1){
   city.innerHTML = opt;
   return ;
   }
   for(var i = 0 ,len = area[province.value].length;i < len;i++){
   opt += '<option value="'+i+'">'+area[province.value][i]+'</option>';
   }
   city.innerHTML = opt;
 }
</script>
</html>

功能講解

首先創(chuàng)建好頁面，然后讓省下拉框響應onchange事件，onchange事件響應的條件是下拉框的值發(fā)生改變時，這里我讓onchange事件響應到ld函數(shù)中。此外我還定義了一個地區(qū)的二維數(shù)組，然后查找dom對象，根據(jù)省下拉框的值來查找是二維數(shù)組中的那一行數(shù)據(jù)，然后循環(huán)該地區(qū)城市來拼接列表項，最后添加到市的下拉框中。

感興趣的朋友可使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript數(shù)組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數(shù)學運算用法總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

JavaScript 浮點數(shù)運算精度問題
JavaScript小數(shù)在做四則運算時，精度會丟失，這會在項目中引起諸多不便，先請看下面腳本。
2009-10-10
JavaScript如何將偽數(shù)組轉換成數(shù)組?
這篇文章主要介紹了JavaScript如何將偽數(shù)組轉換成數(shù)組，?偽數(shù)組的主要特征是一個對象，并且該對象有l(wèi)ength屬性，更多參考內(nèi)容，需要的小伙伴可以參考一下
2022-07-07
JS中常用的輸出方式(五種)
這篇文章主要介紹了JS中常用的輸出方式(五種)的相關資料，非常不錯具有參考借鑒價值,需要的朋友可以參考下
2016-06-06
js返回前一頁刷新本頁重載頁面
本節(jié)主要為大家介紹了js返回前一頁如何刷新本頁重載頁面的方法，需要的朋友可以參考下
2014-07-07
Js的MessageBox效果代碼
看到論壇上有人模仿alert，自己也寫了一個。本來想模仿winapi里的MessageBox 但可惜js 不支持，阻塞模式。
2008-05-05
JavaScript實現(xiàn)圓形進度條效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圓形進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
微信小程序pinker組件使用實現(xiàn)自動相減日期
這篇文章主要介紹了微信小程序pinker組件使用實現(xiàn)自動相減日期,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
Bootstrap入門書籍之（三）柵格系統(tǒng)
這篇文章主要介紹了Bootstrap入門書籍之（三）柵格系統(tǒng)的相關資料,需要的朋友可以參考下
2016-02-02
VsCode插件自動生成注釋插件koroFileHeader使用教程
這篇文章主要介紹了VsCode插件自動生成注釋插件koroFileHeader使用教程,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
JavaScript簡易計算器制作
這篇文章主要為大家詳細介紹了JavaScript簡易計算器制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-01-01