<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-size: 13px;
        }
        h3{
            padding: 0px;
            margin: 8px 0;
        }
        .iframe {
            width: 360px;
            border: 1px solid #666666;
        }
        .iframe .title{
            padding: 5px;
            background-color: #EEEEEE;
        }
        .iframe .content{
            padding: 8px;
            font-size: 12px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        var AreaData = {
            "省份": { val:"",items:{"城市":{val:"",items :{"县区":""}}}},
            "北京市":{ val:"01",items:{ "所辖区":{ val:"0101",items:{"东城区":"010101","西城区":"010102"}}, "所辖县":{ val:"0102",items:{"密云县":"010201","延庆县":"010202"}}}},
            "天津市":{ val:"02",items:{ "所辖区":{ val:"0201",items:{"和平区":"020101","河东区":"020102"}}, "所辖县":{ val:"0202",items:{"宁河县":"020201","静海县":"020202"}}}}
        };
        $(function () {
           var $sel1 = $("#select1");  //省
           var $sel2 = $("#select2");  //市
           var $sel3 = $("#select3");  //县
           var $t1 = $("#tip");

           var $t2 = "";  //提示字符串

           var value1 = "01";  //匹配值
           var value2 = "0101";
           var value3 = "010101";
            //先绑定省、市、县
           $.each(AreaData,function (key, value) {
               appendOpTo($sel1,key,value.val,value1);
           });
            //绑定下拉框的方法
           function appendOpTo($object, key, value, defaultValue) {
               //生成option节点，添加文本，添加值
               var $opt = $("<option>").text(key).val(value);
               //如果值与匹配值相等，此项被选中
               if(value == defaultValue)
               {
                   $opt.attr("selected","true");
               }
               //将option追加至对应的下拉框
               $opt.appendTo($object);
           };

           //省，下拉框变化
           $sel1.change(function () {
               $sel2.html(""); //先清空，市，县
               $sel3.html(""); //
               if(this.selectedIndex == -1) return;
               //取得被选中的值，和文本
               var sel1_curr_val = this.options[this.selectedIndex].value;
               var sel1_curr_txt = this.options[this.selectedIndex].text;
               //
               $.each(AreaData,function (key, value) {
                   //如果省的值与数组的值相等
                   if(sel1_curr_val == value.val)
                   {
                       //并且有items
                       if(value.items)
                       {
                           //将值绑定至市下拉框
                           $.each(value.items,function (key, value) {
                              appendOpTo($sel2,key,value.val,value2);
                           });
                       }
                   }
               });

               $t2 = sel1_curr_txt;
               $t1.html($t2);
               $sel2.change();
           });

           $sel2.change(function () {
               $sel3.html("");
               var sel1_curr_val = $sel1[0].options[$sel1[0].selectedIndex].value;
               if(this.selectedIndex == -1) return;
               var sel2_curr_val = this.options[this.selectedIndex].value;
               $.each(AreaData,function (key, value) {
                  if(sel1_curr_val == value.val)
                  {
                      if(value.items)
                      {
                          $.each(value.items,function (key, value) {
                              if(sel2_curr_val == value.val)
                              {
                                  $.each(value.items,function (key, value) {
                                     appendOpTo($sel3,key,value,value3);
                                  });
                              }
                          });
                      }
                  }
               });
               showChangeItem();
           }).change();

           $sel3.change(function () {
               showChangeItem();
           });
            //获取省市县下拉框的选中文本，生成提示
           function showChangeItem() {
               var sel1_curr_txt = $sel1[0].options[$sel1[0].selectedIndex].text;
               var sel2_curr_txt = $sel2[0].options[$sel2[0].selectedIndex].text;
               var sel3_curr_txt = $sel3[0].options[$sel3[0].selectedIndex].text;
               $t2 = "你选择的是：" + sel1_curr_txt + ">" + sel2_curr_txt + ">" + sel3_curr_txt;
               $t1.html($t2);
           }
        });
    </script>
</head>
<body>
    <div class="iframe">
        <div class="title">请选择省市：
            <select id="select1" name="select1"></select>
            <select id="select2" name="select2"></select>
            <select id="select3" name="select3"></select>
        </div>
        <div class="content">
            <div id="tip"></div>
        </div>
    </div>
</body>
</html>