简单的三级联动

最新推荐文章于 2021-10-26 11:18:07 发布

js_Allen

最新推荐文章于 2021-10-26 11:18:07 发布

阅读量562

点赞数

分类专栏： javascript 文章标签：级联

本文链接：https://blog.csdn.net/u012655237/article/details/43816455

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述

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]);
});

js_Allen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的三级联动

效果图： 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></h
复制链接

扫一扫