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

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

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

效果圖

和以前一樣，先發(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)動菜單</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 = '';
   //如果是請選擇，就顯示空，并結(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īng)onchange事件，onchange事件響應(yīng)的條件是下拉框的值發(fā)生改變時，這里我讓onchange事件響應(yīng)到ld函數(shù)中。此外我還定義了一個地區(qū)的二維數(shù)組，然后查找dom對象，根據(jù)省下拉框的值來查找是二維數(shù)組中的那一行數(shù)據(jù)，然后循環(huán)該地區(qū)城市來拼接列表項，最后添加到市的下拉框中。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：Vue-CLI與Vuex使用方法實例分析

欄目：JavaScript

下一篇：微信小程序?qū)崿F(xiàn)吸頂效果

本文標(biāo)題：JavaScript實現(xiàn)聯(lián)動菜單特效

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9276.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀