利用jquery的三级联动-原创手记-慕课网

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>$.each(arrData,function(index,value){})遍历数组</title>
    <!-- <link href="reset.css" type="text/css" rel="stylesheet">-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
    </style>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>">
    <script type="text/javascript">
        $(document).ready(function () {
                function objInit(obj){//初始化选择项
                    return $(obj).html("<option>请选择</option>");
                }
            var arrdata = {//定义一个数组保存相关数据
                江西省:{
                    南昌市: ["文港","进贤"],
                    赣州: ["信丰","李渡"]
                },
                福建省:{
                    龙岩: ["永定区","新罗区"],
                    厦门: ["思明区","集美区"]
                },
                河北省:{
                    秦皇岛: ["海港区","开发区"],
                    唐山: ["卢龙","昌黎"]
                }
            }
            //遍历数组对象
            $.each(arrdata,function(pF){
                $("#selF").append("<option>"+pF+"</option>");
                $("#selF").on("change",function(){
                    objInit("#selT");
                    objInit("#selC");
                    $.each(arrdata,function(pF,pS){
//                        console.log(pF);
//                        console.log(pS);
                        if($("#selF option:selected").text()== pF){
                        //遍历数组对象，
                            $.each(pS,function(pT,pC){
                                $("#selT").append("<option>"+pT+"</option>");
                            })
                            //
                            $("#selT").on("change",function(){
                                objInit("#selC");
                                //遍历数组对象，
                                $.each(pS,function(pT,pC){
                                     if($("#selT option:selected").text()==pT){
                                         $.each(pC,function(index,value){
                                             $("#selC").append("<option>"+pC[index]+"</option>");
                                         })
                                     }
                                })
                            })
                        }
                    })
                })
            })
            $(".btn").on("click",function(){
                var strValue="您选择的地址为:";
                strValue += $("#selF option:selected").html();
                strValue += " ";
                strValue += $("#selT option:selected").html();
                strValue += " ";
                strValue += $("#selC option:selected").html();
                $(".clsTip").html(strValue);
            })
        })
    </script>
</head>
<body>
<div class="clsInt">
    <h2>下拉列表框事件的应用</h2>
  省份:<select id="selF"><option>请选择</option></select>
  市:<select id="selT"><option>请选择</option></select>
  区县:<select id="selC"><option>请选择</option></select>
    <input type="button" value="查询" name="check" class="btn" id="Button1">
</div>
<div class="clsTip" id="divTip"></div>
</body>
</html>