快捷導(dǎo)航

JavaScript實(shí)現(xiàn)的聯(lián)動(dòng)菜單特效示例

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

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

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

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

效果圖

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

代碼

<!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)動(dòng)菜單</h1>
 <select id="province" onchange="ld();">
  <option value="-1">請(qǐng)選擇</option>
  <option value="0">安徽</option>
  <option value="1">浙江</option>
 </select>
 <select id="city">
 </select>
</body>
<script>
 //定義地區(qū)數(shù)組
 var area = [
  ['安慶','黃山','合肥'],
  ['杭州','溫州','寧波']
 ];
 //聯(lián)動(dòng)函數(shù)
 function ld(){
   var province = document.getElementById('province');//找到省對(duì)象
   var city = document.getElementById('city');//找到市對(duì)象
   var opt = '';
   //如果是請(qǐng)選擇，就顯示空，并結(jié)束函數(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)建好頁(yè)面，然后讓省下拉框響應(yīng)onchange事件，onchange事件響應(yīng)的條件是下拉框的值發(fā)生改變時(shí)，這里我讓onchange事件響應(yīng)到ld函數(shù)中。此外我還定義了一個(gè)地區(qū)的二維數(shù)組，然后查找dom對(duì)象，根據(jù)省下拉框的值來(lái)查找是二維數(shù)組中的那一行數(shù)據(jù)，然后循環(huán)該地區(qū)城市來(lái)拼接列表項(xiàng)，最后添加到市的下拉框中。

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