欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年01月07日 09:16:04   作者：webbc  
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)聯(lián)動菜單特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一篇關(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論