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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

一篇關(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)，最后添加到市的下拉框中。

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

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

欄目：JavaScript

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

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

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9276.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀