jquery实现城市选择器效果(二级联动)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="city.js"></script>
<script>
$(function(){
    //城市联动
    var province='';
    $.each(city,function(index,value){
        province+='<option value="' + value.name + '" index="'+index+'"> ' + value.name + '</option>'
    
    });
$('select[name=province]').append(province).change(function () {
    //$('select[name=city]').html('');
    var option = '';
    if ($(this).val() == '') {
        option += '<option value="">请选择</option>';
    }else{
    var index = $(':selected', this).attr('index');
            var data = city[index].child;
            for (var i = 0; i < data.length; i++) {
                option += '<option value="' + data[i] + '">' + data[i] + '</option>';
            }
    }
    $('select[name=city]').html(option);
})
    
    
})

</script>
</head>

<body>


<select name='province' >
<option value=''>--请选择--</option>

</select>
<select name='city' >
<option value=''>--请选择--</option>

</select>
</body>
</html>
var city = [{"name":"u5317u4eac","child":["u4e1cu57ce","u897fu57ce","u5d07u6587","u5ba3u6b66","u671du9633","u77f3u666fu5c71","u6d77u6dc0","u95e8u5934u6c9f","u623fu5c71","u901au5dde","u987au4e49","u660cu5e73","u5927u5174","u6000u67d4","u5e73u8c37","u5bc6u4e91","u5ef6u5e86"]},{"name":"u5929u6d25","child":["u548cu5e73","u6cb3u4e1c","u6cb3u897f","u5357u5f00","u6cb3u5317","u7ea2u6865","u5858u6cbd","u6c49u6cbd","u5927u6e2f","u4e1cu4e3d","u897fu9752","u6d25u5357","u5317u8fb0","u6b66u6e05","u5b9du577b","u5b81u6cb3","u9759u6d77","u84dfu53bf"]},{"name":"u4e0au6d77","child":["u9ec4u6d66","u5362u6e7e","u5f90u6c47","u957fu5b81","u9759u5b89","u666eu9640","u95f8u5317","u8679u53e3","u6768u6d66","u95f5u884c","u5b9du5c71","u5609u5b9a","u6d66u4e1cu65b0","u91d1u5c71","u677eu6c5f","u9752u6d66","u5357u6c47","u5949u8d24","u5d07u660e"]},{"name":"u91cdu5e86","child":["u4e07u5dde","u6daau9675","u6e1du4e2d","u5927u6e21u53e3","u6c5fu5317","u6c99u576au575d","u4e5du9f99u5761","u5357u5cb8","u5317u789a","u4e07u76db","u53ccu6865","u6e1du5317","u5df4u5357","u9ed4u6c5f","u957fu5bff","u7da6u6c5f","u6f7cu5357","u94dcu6881","u5927u8db3","u8363u660c","u74a7u5c71","u6881u5e73","u57ceu53e3","u4e30u90fd","u57abu6c5f","u6b66u9686","u5fe0u53bf","u5f00u53bf","u4e91u9633","u5949u8282","u5debu5c71","u5debu6eaa","u77f3u67f1","u79c0u5c71","u9149u9633","u5f6du6c34","u6c5fu6d25","u5408u5ddd","u6c38u5ddd","u5357u5ddd"]},{"name":"u6cb3u5317","child":["u4fddu5b9a","u6ca7u5dde","u627fu5fb7","u5b9au5dde","u9986u9676","u90afu90f8","u8861u6c34","u5ecau574a","u79e6u7687u5c9b","u77f3u5bb6u5e84","u5510u5c71","u90a2u53f0","u5f20u5bb6u53e3","u6b63u5b9a","u8d75u53bf","u5f20u5317"]},{"name":"u6cb3u5357","child":["u5b89u9633","u957fu845b","u9e64u58c1","u7126u4f5c","u6d4eu6e90","u5f00u5c01","u6d1bu9633","u6f2fu6cb3","u660eu6e2f","u5357u9633","u5e73u9876u5c71","u6feeu9633","u5546u4e18","u4e09u95e8u5ce1","u65b0u4e61","u8bb8u660c","u4fe1u9633","u79b9u5dde","u9122u9675","u90d1u5dde","u5468u53e3","u9a7bu9a6cu5e97"]},{"name":"u9ed1u9f99u6c5f","child":["u5927u5e86","u5927u5174u5b89u5cad","u54c8u5c14u6ee8","u9e64u5c97","u9ed1u6cb3","u4f73u6728u65af","u9e21u897f","u7261u4e39u6c5f","u9f50u9f50u54c8u5c14","u4e03u53f0u6cb3","u7ee5u5316","u53ccu9e2du5c71","u4f0au6625"]},{"name":"u5409u6797","child":["u767du57ce","u767du5c71","u957fu6625","u5409u6797","u8fbdu6e90","u677eu539f","u56dbu5e73","u901au5316","u5ef6u8fb9"]},{"name":"u8fbdu5b81","child":["u978du5c71","u672cu6eaa","u671du9633","u5927u8fde","u4e39u4e1c","u629au987a","u961cu65b0","u846bu82a6u5c9b","u9526u5dde","u8fbdu9633","u76d8u9526","u6c88u9633","u94c1u5cad","u74e6u623fu5e97","u8425u53e3"]},{"name":"u5c71u4e1c","child":["u6ee8u5dde","u5fb7u5dde","u4e1cu8425","u83cfu6cfd","u6d4eu5357","u6d4eu5b81","u57a6u5229","u4e34u6c82","u804au57ce","u83b1u829c","u9752u5c9b","u65e5u7167","u6cf0u5b89","u6f4du574a","u5a01u6d77","u70dfu53f0","u6dc4u535a","u67a3u5e84","u7ae0u4e18","u8bf8u57ce"]},{"name":"u5185u8499u53e4","child":["u963fu62c9u5584u76df","u5305u5934","u5df4u5f66u6dd6u5c14u76df","u8d64u5cf0","u9102u5c14u591au65af","u547cu548cu6d69u7279","u547cu4f26u8d1du5c14","u6d77u62c9u5c14","u901au8fbd","u4e4cu6d77","u4e4cu5170u5bdfu5e03","u9521u6797u90edu52d2u76df","u5174u5b89u76df"]},{"name":"u6c5fu82cf","child":["u5e38u5dde","u5927u4e30","u6deeu5b89","u8fdeu4e91u6e2f","u5357u4eac","u5357u901a","u82cfu5dde","u5bbfu8fc1","u6cf0u5dde","u65e0u9521","u5f90u5dde","u626cu5dde","u76d0u57ce","u9547u6c5f"]},{"name":"u5b89u5fbd","child":["u5b89u5e86","u868cu57e0","u4eb3u5dde","u5de2u6e56","u6c60u5dde","u6ec1u5dde","u961cu9633","u5408u80a5","u6deeu5357","u6deeu5317","u9ec4u5c71","u548cu53bf","u970du90b1","u516du5b89","u9a6cu978du5c71","u5bbfu5dde","u94dcu9675","u6850u57ce","u829cu6e56","u5ba3u57ce"]},{"name":"u5c71u897f","child":["u957fu6cbb","u5927u540c","u664bu57ce","u664bu4e2d","u5415u6881","u4e34u6c7e","u4e34u7317","u6e05u5f90","u6714u5dde","u592au539f","u5ffbu5dde","u8fd0u57ce","u9633u6cc9"]},{"name":"u9655u897f","child":["u5b89u5eb7","u5b9du9e21","u6c49u4e2d","u5546u6d1b","u94dcu5ddd","u6e2du5357","u897fu5b89","u54b8u9633","u5ef6u5b89","u6986u6797"]},{"name":"u7518u8083","child":["u767du94f6","u5b9au897f","u7518u5357","u91d1u660c","u5609u5ceau5173","u9152u6cc9","u5170u5dde","u4e34u590f","u9647u5357","u5e73u51c9","u5e86u9633","u5929u6c34","u6b66u5a01","u5f20u6396"]},{"name":"u6d59u6c5f","child":["u676du5dde","u6e56u5dde","u5609u5174","u91d1u534e","u4e3du6c34","u5b81u6ce2","u8862u5dde","u7ecdu5174","u53f0u5dde","u6e29u5dde","u4e49u4e4c","u821fu5c71"]},{"name":"u6c5fu897f","child":["u629au5dde","u8d63u5dde","u4e5du6c5f","u5409u5b89","u666fu5fb7u9547","u5357u660c","u840du4e61","u4e0au9976","u65b0u4f59","u9e70u6f6d","u5b9cu6625","u6c38u65b0"]},{"name":"u6e56u5317","child":["u6069u65bd","u9102u5dde","u9ec4u77f3","u9ec4u5188","u8346u5dde","u8346u95e8","u6f5cu6c5f","u5341u5830","u795eu519cu67b6","u968fu5dde","u5929u95e8","u6b66u6c49","u8944u9633","u5b5du611f","u4ed9u6843","u54b8u5b81","u5b9cu660c"]},{"name":"u6e56u5357","child":["u957fu6c99","u5e38u5fb7","u90f4u5dde","u8861u9633","u6000u5316","u5a04u5e95","u90b5u9633","u6e58u6f6d","u6e58u897f","u5cb3u9633","u6c38u5dde","u76cau9633","u682au6d32","u5f20u5bb6u754c"]},{"name":"u8d35u5dde","child":["u5b89u987a","u6bd5u8282","u8d35u9633","u516du76d8u6c34","u9ed4u4e1cu5357","u9ed4u5357","u9ed4u897fu5357","u94dcu4ec1","u9075u4e49"]},{"name":"u56dbu5ddd","child":["u963fu575d","u5df4u4e2d","u6210u90fd","u5fb7u9633","u8fbeu5dde","u5e7fu5b89","u5e7fu5143","u7518u5b5c","u4e50u5c71","u6cf8u5dde","u51c9u5c71","u7ef5u9633","u7709u5c71","u5185u6c5f","u5357u5145","u6500u679du82b1","u9042u5b81","u5b9cu5bbe","u96c5u5b89","u81eau8d21","u8d44u9633"]},{"name":"u4e91u5357","child":["u4fddu5c71","u695au96c4","u5927u7406","u8feau5e86","u5fb7u5b8f","u7ea2u6cb3","u6606u660e","u4e3du6c5f","u4e34u6ca7","u6012u6c5f","u666eu6d31","u66f2u9756","u6587u5c71","u897fu53ccu7248u7eb3","u7389u6eaa","u662du901a"]},{"name":"u65b0u7586","child":["u963fu514bu82cf","u963fu62c9u5c14","u5df4u97f3u90edu695e","u535au5c14u5854u62c9","u660cu5409","u54c8u5bc6","u548cu7530","u514bu62c9u739bu4f9d","u5e93u5c14u52d2","u5580u4ec0","u514bu5b5cu52d2u82cf","u77f3u6cb3u5b50","u5410u9c81u756a","u56feu6728u8212u514b","u4e4cu9c81u6728u9f50","u4e94u5bb6u6e20","u4f0au7281","u5854u57ce","u963fu52d2u6cf0"]},{"name":"u5b81u590f","child":["u56fau539f","u77f3u5634u5c71","u5434u5fe0","u94f6u5ddd","u4e2du536b"]},{"name":"u9752u6d77","child":["u679cu6d1b","u9ec4u5357","u6d77u897f","u6d77u4e1c","u6d77u5317","u6d77u5357","u897fu5b81","u7389u6811"]},{"name":"u897fu85cf","child":["u963fu91cc","u660cu90fd","u62c9u8428","u6797u829d","u90a3u66f2","u65e5u5580u5219","u5c71u5357"]},{"name":"u5e7fu897f","child":["u767eu8272","u5317u6d77","u5d07u5de6","u9632u57ceu6e2f","u6842u6797","u8d35u6e2f","u6cb3u6c60","u8d3au5dde","u67f3u5dde","u6765u5bbe","u5357u5b81","u94a6u5dde","u68a7u5dde","u7389u6797"]},{"name":"u5e7fu4e1c","child":["u6f6eu5dde","u4e1cu839e","u4f5bu5c71","u5e7fu5dde","u60e0u5dde","u6cb3u6e90","u6c5fu95e8","u63edu9633","u8302u540d","u6885u5dde","u6e05u8fdc","u987au5fb7","u6df1u5733","u6c55u5934","u97f6u5173","u6c55u5c3e","u53f0u5c71","u9633u6c5f","u9633u6625","u4e91u6d6e","u73e0u6d77","u4e2du5c71","u6e5bu6c5f","u8087u5e86"]},{"name":"u798fu5efa","child":["u798fu5dde","u9f99u5ca9","u5b81u5fb7","u5357u5e73","u8386u7530","u6cc9u5dde","u4e09u660e","u6b66u5937u5c71","u53a6u95e8","u6f33u5dde"]},{"name":"u6d77u5357","child":["u6d77u53e3","u4e09u4e9a","u4e94u6307u5c71"]},{"name":"u53f0u6e7e","child":["u53f0u5317u5e02","u9ad8u96c4u5e02","u57fau9686u5e02","u53f0u4e2du5e02","u53f0u5357u5e02","u65b0u7af9u5e02","u5609u4e49u5e02","u65b0u5317u5e02","u5b9cu5170u53bf","u6843u56edu53bf","u65b0u7af9u53bf","u82d7u6817u53bf","u53f0u4e2du53bf","u5f70u5316u53bf","u5357u6295u53bf","u4e91u6797u53bf","u5609u4e49u53bf","u53f0u5357u53bf","u9ad8u96c4u53bf","u5c4fu4e1cu53bf","u6f8eu6e56u53bf","u53f0u4e1cu53bf","u82b1u83b2u53bf"]},{"name":"u9999u6e2f","child":["u4e2du897fu533a","u4e1cu533a","u4e5du9f99u57ceu533a","u89c2u5858u533a","u5357u533a","u6df1u6c34u57d7u533a","u9ec4u5927u4ed9u533a","u6e7eu4ed4u533a","u6cb9u5c16u65fau533a","u79bbu5c9bu533a","u8475u9752u533a","u5317u533a","u897fu8d21u533a","u6c99u7530u533a","u5c6fu95e8u533a","u5927u57d4u533a","u8343u6e7eu533a","u5143u6717u533a"]},{"name":"u6fb3u95e8","child":["u82b1u5730u739bu5802u533a","u5723u5b89u591au5c3cu5802u533a","u5927u5802u533a","u671bu5fb7u5802u533a","u98ceu987au5802u533a","u6c39u4ed4","u8defu73af"]},{"name":"u5176u4ed6","child":["u4e0du9650"]}];
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kongxs/p/3426696.html