Jquery实现下拉三级关联

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content=" keywords" />
    <meta name="description" content="description" />
    <title>下拉三级关联</title>   
<style type="text/css">
  body{
    font-size:13px
  }

  .clsInit{
    width:435px;
    height:35px;
    line-height:35px;
  }

  .clsTip{
    padding-top:5px;
    background-color:#eee;
    display:none
  }

  .detail{
        width: 200px;
        height: 150px;
        margin-top: 10px;
  }
</style>
</head>
<body>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
          $(()=>{
            function objInit(obj){
              return $(obj).html('<option>请选择</option>');
            }
            var arrData={
              江苏省:
              {
                苏州市:'吴中区,姑苏区,虎丘区,相城区,吴江区,工业园区,常熟市,张家港市,太仓市,昆山市',
                无锡市:'崇安区,南长区,北塘区,滨湖区,惠山区,锡山区,江阴市,宜兴市',  
                常州市:'武进区,钟楼区,天宁区,新北区,金坛区,溧阳市',
                镇江市:'润州区',
                南京市:'鼓楼区,下关区,建邺区,浦口区',
                淮安市:'清河区,清浦区,淮阴区,淮安区,盱眙县,金湖县,涟水县,洪泽县',
              },
              安徽省:
              {
                合肥市:'庐阳区,包河区,蜀山区,瑶海区,肥东县,肥西县,长丰县,庐江县,巢湖市 ',
                淮北市:'杜集区,相山区,烈山区',
                黄山市:'屯溪区,休宁区,黄山区',
                池州市:'贵池区,东至县,石台县,青阳县'
              },
              贵州省:
              {
                贵阳市:'南明区,云岩区,乌当区,观山湖区,白云区,花溪区',
                毕节市:'大方县,黔西县,金沙县,织金县,威宁县'
              }
            };

            $.each(arrData,(pF)=>{
              $('#selF').append('<option>'+pF+'</option>');
            });

            $('#selF').change(()=>{
                objInit('#selT');
                objInit('#selC');
              $.each(arrData,(pF,pS)=>{
                if($('#selF option:selected').text()==pF){
                  $.each(pS,(pT,pC)=>{
                    $('#selT').append('<option>'+pT+'</option>');
                  });
                  $('#selT').change(()=>{
                    objInit('#selC');
                    $.each(pS,(pT,pC)=>{
                      if($('#selT option:selected').text()==pT){
                        $.each(pC.split(","),function(){
                          $('#selC').append('<option>'+this+'</option>');
                        })
                      }
                    })     
                  });
                }
              })
            });
          });
</script>
<div class="clsInit">
    <select id="selF"><option>请选择</option></select>
    <select id="selT"><option>请选择</option></select>
    <select id="selC"><option>请选择</option></select>
</div>
    <textarea class="detail" placeholder="请在此填写您的详细地址..."></textarea>
</body>
</html>
预览图
1.jpg
Jquery实现下拉三级关联

推荐阅读更多精彩内容
