您的位置：首页 > 其它

简单的三级联动

2015-02-14 11:26 183 查看

效果图：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta lang="zh">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="jtest.css">
<title>三级联动</title>
</head>
<body>
<div>
省<select id="prov"></select>
市<select id="city"></select>
区<select id="part"></select>
</div>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jtest.js"></script>
</body>
</html>

css代码：

select {
width:80px;
margin-right:30px;
}

js代码：

$(document).ready(function () {
"use strict";
//对象直接量
var arrData = {
广东省:{广州市:"番禺区,荔湾区",
汕头市:"潮南区,潮阳区"},
福建省:{福州市:"鼓楼区,仓山区",
厦门:"海沧区,集美区"},
湖南省:{长沙市:"芙蓉区,岳麓区",
常德市:"武陵县,桃源县"}
};
//每个选择框的初始值都设置为“请选择”，以便于触发事件
function init(obj) {
$(obj).html("<option>请选择</option>");
}
//第一个框
$.each(arrData, function (key1, value1) {
$("#prov").append("<option>" + key1 + "</option>");
});
$("#prov").change(function () {
init("#city");
$.each(arrData, function (key1, value1) {
if ($("#prov option:selected").text() === key1) {
//第二个框
$.each(value1, function (key2, value2) {
$("#city").append("<option>" + key2 + "</option>");
});
$("#city").change(function () {
init("#part");
$.each(value1, function (key2, value2) {
if ($("#city option:selected").text() === key2) {
//第三个框，value2为字符串，将其转为数组
$.each(value2.split(","), function () {
$("#part").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
});

注：

1、关于对象直接量：

键值对中间用冒号隔开，键值对之间用逗号隔开，整个映射表用花括号括起来

键的名字里有空格或连字符时，要用双引号括起来

一般定义：
var book={story:"book1",
textbook:"book2"
}
复杂定义：
var book={story:{long:"book1",short:"book2"},
textbook:{math:"book3",english:"book4"}
}

2.关于jQuery $.each():

一维数组：

var book=["book1","book2","book3"];
$.each(book,function(){
alert(this);
});
结果:book1 book2 book3

二维数组：

var book=[["book1","book2"],["book3","book4"]];
$.each(book,function(index,item){
alert(item[0]);
});
结果：book1 book3

键值对：

var book={story:"book1",textbook:"book2"};
$.each(book,function(){
alert(key+""+book[key]);
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航