js代码
创新互联建站主营长泰网站建设的网络公司,主营网站建设方案,重庆App定制开发,长泰h5小程序开发搭建,长泰网站营销推广欢迎长泰等地区企业咨询
//级联菜单
var province = ['江西省','江苏省','浙江省','甘肃省','江西省','江苏省','浙江省','甘肃省'];
var city = Array(
new Array ('南昌市','赣州市','抚州市','上饶市'),
new Array('杭州市','温州市','宁波市'),
new Array('南京市','苏州市','昆山市','太仓市'),
new Array('兰州市','敦煌市','兰楼市'),
new Array ('南昌市','赣州市','抚州市','上饶市'),
new Array('杭州市','温州市','宁波市'),
new Array('南京市','苏州市','昆山市','太仓市'),
new Array('兰州市','敦煌市','兰楼市')
)
//遍历省份
for(var i=0;iprovince.length;i++){
var opt = document.createElement('option'); //创建一个结点
opt.value = province[i]; //在value显示
opt.innerHTML = opt.value; //页面显示
document.getElementById('big').appendChild(opt);
}
//省份值改变的时候调用函数
function show_small(){
//alert( document.getElementById('big').selectedIndex);//拿到下标
document.getElementById('small').innerHTML="";//清空 appendChild会追加
var index = document.getElementById('big').selectedIndex;
for(var i=0;icity[index-1].length;i++){ //注意下标
var opt = document.createElement('option');
opt.value = city[index-1][i];
opt.innerHTML = opt.value;
document.getElementById('small').appendChild(opt);
}
}
html代码
!-- 级联菜单--
select id="big" onchange="show_small()"
option value=""--select--/option
/select
select id="small"
option value=""--select--/option
/select
手上刚好有个二级联动的，三级联动的你可以自己看着加进去，希望对你有帮助
粗糙运用原生js完成三级目录
!DOCTYPE html
html
head
meta charset="utf-8"
title/title
style type="text/css"
*{margin: 0;padding: 0;}
body{
font-size: 12px!important;
}
.box{
width: 66px;
margin:66px auto;
}
/* 一级li样式 */
li{list-style: none;}
.yijimulu{
width: 66px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: orange;
color: #333333;
position: relative;
cursor: pointer;
}
/* 二级ul样式 */
.erjiul{
position: absolute;
top: -1px;
left: 65px;
display: none;
}
.erjili,.sanjiLi{
width: 66px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
background-color: orange;
color: #333333;
position: relative;
cursor: pointer;
}
.sanjiul{
position: absolute;
top: -1px;
left: 65px;
display: none;
}
/style
/head
body
div class="box"/div
script
var obox = document.querySelector('.box')
function Message(box) {
this.box = box
// 创建一级目录方法
this.CreatOne()
// 创建二级目录方法
this.CreatTwo()
// 创建三级目录
this.CreatThree()
}
// 创建一级目录
Message.prototype.CreatOne = function (){
// 创建一级ul
this.ul = document.createElement('ul')
// 创建一级li
this.ul.innerHTML = `
li一级目录/lili一级目录/lili一级目录/lili一级目录/lili一级目录/li
`
// 添加一级ul到div内
this.box.appendChild(this.ul)
// console.log(this.ul)
// 获取一级ul内所有li并起名
this.oli = this.ul.querySelectorAll('li')
// 循环出一级ul内所有li并起名设置样式
for (let i = 0;i this.oli.length;i++) {
this.oli[i].className = 'yijimulu'
// 设置一级样式鼠标划入效果
this.oli[i].addEventListener('mouseenter',()={
// 清空一级目录鼠标移入效果
for(let i = 0;i this.oli.length;i++) {
this.oli[i].style.border = 'none'
this.oli[i].style.color = '#333333'
this.bulname[i].style.display = 'none'
}
this.oli[i].style.border = '1px solid red'
this.oli[i].style.color = 'white'
this.bulname[i].style.display = 'block'
},false)
// 设置一级目录鼠标移出效果
this.oli[i].addEventListener('mouseleave',()={
this.oli[i].style.border = 'none'
this.oli[i].style.color = '#333333'
this.bulname[i].style.display = 'none'
},false)
}
}
// 创建三级目录
Message.prototype.CreatTwo = function () {
// this.oli是一级子li目录
// 创建二级目录ul
this.bul = document.createElement('ul')
// 添加到一级li里 this.oli
for (let i = 0;i this.oli.length;i++) {
this.oli[i].innerHTML = '一级目录ul/ul'
}
// 获取所有二级ul
this.bulname = this.ul.querySelectorAll('ul')
for (let i = 0;ithis.bulname.length;i++){
// 给二级ul起名
this.bulname[i].className = 'erjiul'
// 创建二级li
this.bulname[i].innerHTML = `li二级目录/lili二级目录/lili二级目录/lili二级目录/lili二级目录/li`
this.bli = this.bulname[i].querySelectorAll('li')
// console.log(this.bli)
for (let i = 0;ithis.bulname.length;i++) {
this.bli[i].className = 'erjili'
}
}
// 获取所有二级Ul下的li
// 先通过所有二级ul的类名获取到所有的二级ul
}
// 创建三级目录
Message.prototype.CreatThree = function () {
// 先获取到所有的二级li
this.twoli = this.ul.querySelectorAll('.erjili')
// console.log(this.twoli)
// 创建三级ul
for (let i = 0;ithis.twoli.length;i++) {
// console.log(this.twoli)
this.twoli[i].addEventListener('mouseenter',()={
// console.log(this.twoli[i])
for(let i = 0;ithis.twoli.length;i++){
this.twoli[i].style.border = 'none'
this.twoli[i].style.color = '#333333'
this.culclass[i].style.display = 'none'
}
this.twoli[i].style.border = '1px solid red'
this.twoli[i].style.color = 'white'
this.culclass[i].style.display = 'block'
},false)
this.twoli[i].addEventListener('mouseleave',()={
this.twoli[i].style.border = 'none'
this.twoli[i].style.color = '#333333'
this.culclass[i].style.display = 'none'
},false)
}
this.cul = document.createElement('ul')
for (let i = 0;ithis.twoli.length;i++) {
this.twoli[i].innerHTML = '二级目录ul/ul'
this.culname = this.twoli[i].querySelector('ul')
this.culname.className = 'sanjiul'
this.culname.innerHTML = `li三级目录/lili三级目录/lili三级目录/lili三级目录/lili三级目录/li`
// 获取所有三级Li
this.culclass = this.ul.querySelectorAll('.sanjiul')
for (let i = 0;ithis.culclass.length;i++) {
this.cli = this.culclass[i].querySelectorAll('li')
for (let i = 0;ithis.cli.length;i++){
// this.cli = this.culclass[i].querySelectorAll('li')
this.cli[i].className = 'sanjiLi'
}
}
this.threeli = this.ul.querySelectorAll('.sanjiLi')
console.log(this.threeli)
for (let i = 0;i this.threeli.length;i++) {
this.threeli[i].addEventListener('mouseenter',()={
for (let i = 0;ithis.threeli.length;i++) {
this.threeli[i].style.border = 'none'
this.threeli[i].style.color = '#333'
}
this.threeli[i].style.border = '1px solid red'
this.threeli[i].style.color = 'white'
},false)
}
}
}
var msg = new Message(obox)
/script
/body
/html
第3版全新的内容就有5章，涵盖了全新的HTML5 API，比如历史状态管理、Canvas、离线应用、Web Workers，等等。在全书各章里，我也增加了ECMAScript 5带来的变化，包括严格模式的限制和如何使用新API创建对象。原有内容也都更新了最新浏览器支持信息，包括移动平台浏览器的支持情况（不过，浏览器支持情况永远跟不上变化）。另外，这一版还为ECMAScript Harmony增加了一个附录，以便读者提前了解一下未来的情形。
译者在翻译过程中比对的信息
本书第2版正文22章，另有两个附录。第3版则有25章，4个附录。作者在博客中提到的新增的5章大致应该如下。
第11章：DOM扩展
第15章：使用Canvas绘图
第16章：HTML5脚本编程
第23章：离线应用与客户端存储
第25章：新兴的API
之所以说大致是这5章，主要因为它们跟“HTML5及相关规范”都有联系。而事实上，可以算得上新增的不止这几章，以下几章内容基本上也算是全新的。
第20章：JSON（介绍浏览器对JSON序列化及字符串解析的原生API）
第21章：Ajax与Comet（介绍Ajax及长轮询和HTTP流——Comet）
附录A：ECMAScript Harmony
附录B：严格模式
除此之外，更新内容比较多的还有以下几章——主要区别是ECMAScript 5新增的严格模式下一些基本语法结构的变化及限制，还有新的语言特性（比如新增的数组操作方法、事件类型等）以及DOM3级事件模块相关的更新：
第3章：语言基础
第5章：引用类型
第13章：事件
目前，本书正在翻译中。图灵会在保证质量的前提下，尽量加快本书的出版进度，希望这个体现ECMAScript 5和HTML5规范的新版本早日与中文读者见面。
