jquery下拉列表框联动显示案例 each函数的应用

最新推荐文章于 2022-10-16 19:56:20 发布

小队员

最新推荐文章于 2022-10-16 19:56:20 发布

阅读量473

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u014067713/article/details/64906121

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市选择</title>
    <script src="jquery-2.1.1.js"></script>
    <style type="text/css">
        body{
            background-color: aqua;
        }
        .show_area{
            background-color: aquamarine;
            margin: 200px auto auto auto;
            width: 600px;
            height:200px;
            border:solid 1px darkcyan;
        }
        #header{
            position: absolute;
            width:300px;
            height: 30px;
            padding-top: 10px;
            padding-left: 200px;
            font-size: 20px;
            font-family: 宋体;
        }
        .choose{
            margin: 60px auto auto 100px;
        }
        .btn{
            margin: 70px auto auto 260px;
            font-size: 20px;
            width: 80px;
            height: 26px;
            text-align: center;
            border:solid 1px #eee;
            background-color: lawngreen;
        }
        .btn_up{
            background-color: lime;
        }
        .repo{
            margin:50px auto;
            text-align: center;
            color: dodgerblue;
        }
    </style>
</head>
<body>
    <div class="show_area">
        <span id="header">请选择城市并点击查询</span>
        <div class="choose">
            省份：<select id="prov">  <option>请选择</option></select>
            城市：<select id="city">  <option>请选择</option></select>
            学校：<select id="school"><option>请选择</option></select>
        </div>
        <input class="btn" type="button" value="确 定"/>
    </div>
    <div class="repo"></div>
    <script>
        var arrData = {
            江苏省:{
                南京市:"南京大学,东南大学,河海大学",
                苏州市:"苏州大学,苏州科技大学,苏州职业大学",
                徐州市:"中国矿业大学,徐州师范大学"
            },
            浙江省:{
                杭州市:"浙江大学,杭州电子科技大学,浙江工业大学",
                宁波市:"宁波大学,宁波工程学院,宁波理工学院",
                金华市:"浙江师范大学,义乌工商学院"
            },
            山东省:{
                济南市:"山东大学,山东师范大学",
                青岛市:"山东科技大学,山东理工大学,青岛农业大学",
                泰安市:"山东农业大学,泰山医学院"
            },
            上海市:{
                上海市:"上海交通大学,复旦大学,同济大学,上海大学"
            }
        };
        $(document).ready(function(){
            $("input").hover(
                function(){$("input").addClass("btn_up");},
                function(){$("input").removeClass("btn_up");}
           );
            $.each(arrData,function(fP){
                $("#prov").append("<option>" + fP + "</option>");
            });
            $("#prov").change(function(){
                initObj("#city");
                initObj("#school");
                $.each(arrData,function(fP,fE){
                    if(fP == $("#prov option:selected").text()){  //找到选择的省份
                        $.each(fE,function(fC,fS){
                            $("#city").append("<option>" + fC + "</option>");
                        });

                        $("#city").change(function(){
                            initObj("#school");
                            $.each(fE,function(fC,fS){
                                if(fC == $("#city option:selected").text()){
                                    $.each(fS.split(','),function(){
                                        $("#school").append("<option>"+this+"</option>");
                                    });
                                }
                            })
                        });
                    }
                });
            });
            $(".btn").click(function(){
                var showArr = "您选择的高校位于：";
                if($("#prov option:selected").text() == "请选择"){
                    alert("请选择省份！");
                    return false;
                }
                if($("#city option:selected").text() == "请选择"){
                    alert("请选择城市！");
                    return false;
                }
                if($("#school option:selected").text() == "请选择"){
                    alert("请选择学校！");
                    return false;
                }

                showArr += $("#prov option:selected").text();
                showArr += ",";
                showArr += $("#city option:selected").text();
                showArr += ";学校名称：";
                showArr += $("#school option:selected").text() + ",谢谢！";
                $(".repo").html(showArr);
            });
        });
        function initObj(obj){
            $(obj).html("<option>请选择</option>");
            return false;
        }
    </script>
</body>
</html>

小队员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery下拉列表框联动显示案例 each函数的应用

城市选择 body{ background-color: aqua; } .show_area{ background-color: aquamarine; margin: 200px auto auto auto; width: 60
复制链接

扫一扫

专栏目录