html5联动,Html5动画

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

给你一个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

相关问答

Q1: 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=""/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

!----

Q2: 58同城的分类用html5是怎么做的，就是点击一个区域，这个区域的街道都会出现

现在的网站基本上都是用ajax,你可以看一下它们请求这些信息的网址和参数，然后在你的页面向它们请求数据。

你可以在服务器端请求再返回给你的用户，因为这样可以避免浏览器跨域的问题，也避免用户看到你的请求别人的数据。

[img]

Q3: 像这种联动的图表可视化插件哪儿能找到

这个应该是js插件

10 款强大的JavaScript图表图形插件

1. Humble Finance

这是一个非常好用的HTML5数据可视化工具，与Flash工具颇为相似。基于JavaScript，利用了Prototype 和 Flotr 库，可用于显示两组实时二维数据。

2. D3

D3是最流行的可视化库之一，它可以将任意数据绑定到DOM（Document Object Model，文档对象模型），然后对该文件提供数据驱动转换。还可以将一组数据生成基本的HTML表，或生成一个SVG条形图。

3. Rickshaw

Rickshaw可以创建交互时间序列图。它依赖于D3的可视化库，需要一些扩展比如jQuery和jQuery UI来辅助实现。

4. jqPlot

5. rGraph

6. Digraphs

7. CanvasXpress

8. gRaphael

这个工具可在网站上创建美观的图表，它基于Raphael图形库，可以查看静态图表和互动图表的演示。

9. Flotr2

一个独立框架库，可以绘制HTML5的图表图形，实际上是flotr的一个分支，功能更完善。可生成线形图、条形图、烛形图、饼形图和气泡图，还支持旧的浏览器（如IE 6）和移动平台。

10. Awesome Chart JS

顾名思义，这是一个很棒的JavaScript库，它可用于创建基于HTML 5 canvas元素的图表。这个库很简单，只需要几行代码就能快速生成简单的图表。