什么是html5纯CSS的三级联动级联菜单

html-css06

什么是html5纯CSS的三级联动级联菜单,第1张

给你一个JQ的三级联动：

<!doctype html>

<html>

<head>

<title></title>

<meta charset = "utf-8"/>

</head>

<style>

</style>

<body>

<select id="one">

<option value="">请选择省份</option>

</select>

<select id="two">

<option value="">请选择城市</option>

</select>

<select id="three">

<option value="">请选择区域</option>

</select>

<script type="text/javascript" src="js/jquery-1.12.0.js"></script>

<script type="text/javascript">

/*

1.搭建框架

2.给省份和城市绑定change事件

*/

$(function(){

var province = [

{"name" : "广东省" ,

"city" : [

{

"name" : "广州市" ,

"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]

},

{

"name" : "深圳市" ,

"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]

}

]

},

{"name" : "浙江省" ,

"city" : [

{

"name" : "杭州市" ,

"area" : ["上城区","下城区","江干区","西湖区"]

},

{

"name" : "丽水" ,

"area" : ["莲都区","松阳县","遂昌县","云和县"]

}

]

},

{"name" : "江西省" ,

"city" : [

{

"name" : "南昌市" ,

"area" : ["东湖区","西湖区","青云谱区","湾里区"]

},

{

"name" : "九江市" ,

"area" : ["浔阳区","庐山区","瑞昌市","九江县"]

},

{

"name" : "赣州市" ,

"area" : ["章贡区","南康区","上犹县","赣县"]

}

]

},

]

// 二级联动

$("#two").change(function(){

var one_index = $("#one option:selected").index()

var two_index = $("#two option:selected").index()

var three = $("#three")

three.empty().append("<option>请选择区域</option>")

if(two_index > 0){

var area = province[one_index-1].city[two_index-1].area

for(var i = 0  i < area.length  i++){

three.append("<option>"+area[i]+"</option>")

}

}

})

// 一级联动

$("#one").change(function(){

var one_index = $("#one option:selected").index()

var two = $("#two")

console.log(one_index)

two.empty().append("<option>请选择城市</option>")

$("#three").empty().append("<option>请选择区域</option>")//清除

if(one_index > 0){

var city = province[one_index-1].city

console.log(province[one_index-1].city)

for(var i = 0  i < city.length  i++){

two.append("<option>"+city[i].name+"</option>")

}

}

})

init()

function init(){

for(var i = 0  i < province.length  i++){

$("#one").append("<option>"+province[i].name+"</option>")

}

}

})

</script>

</body>

</html>

按说这种操作应该是后台程序来做，前端操作的话有点窒息，主要是数据量。。亲测有效，望采纳！

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="CSS3/xuanxing.css" />

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

</head>

<body>

<style>

select{ width:75px font-size:12px color:#000000 font-family:'宋体' margin:auto 0px}

#select0{ background:yellow}

.select{ background:#85e785}

</style>

<script>

$(document).ready(function(e) {

$("select#select0").change(function(){

var cc = $(this).find("option:selected").attr("class")

$(this).siblings("select").find("option").hide()

$(this).siblings("select").find("option."+cc).show()

$(this).siblings("select").find("option."+cc+":first").attr("selected","selected")

})

$("select.select").change(function(){

var cid = $(this).find("option:selected").index()

$(this).siblings("select.select").each(function(){

$(this).find("option").eq(cid).attr("selected","selected")

})

})

})

</script>

<div style="width: 400px height: 20px margin:0 auto word-spacing: 0px">

<select id="select0">

<option class="op0">10mm</option>

<option class="op1">20mm</option>

<option class="op2">40mm</option>

</select>

<select class="select">

<option class="op0">8n</option>

<option class="op0">12n</option>

<option class="op0">16n</option>

<option class="op1">24n</option>

<option class="op1">28n</option>

<option class="op1">32n</option>

<option class="op2">40n</option>

<option class="op2">44n</option>

</select>

<select class="select">

<option class="op0">70mm</option>

<option class="op0">110mm</option>

<option class="op0">150mm</option>

<option class="op1">230mm</option>

<option class="op1">270mm</option>

<option class="op1">310mm</option>

<option class="op2">390mm</option>

<option class="op2">430mm</option>

</select>

<select class="select">

<option class="op0">128mm</option>

<option class="op0">190mm</option>

<option class="op0">230mm</option>

<option class="op1">310mm</option>

<option class="op1">350mm</option>

<option class="op1">390mm</option>

<option class="op2">470mm</option>

<option class="op2">510mm</option>

</select>

<select class="select">

<option class="op0">ESA0810</option>

<option class="op0">ESA1210</option>

<option class="op0">ESA1610</option>

<option class="op1">ESA2410</option>

<option class="op1">ESA2810</option>

<option class="op1">ESA3210</option>

<option class="op2">ESA4010</option>

<option class="op2">ESA4410</option>

</select>

</div>

</body>

</html>

<!---->