省市二级联动

2022-07-29,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>用户中心</title>
	<style>
	
	</style>
	<script src="./js/jquery-3.5.1.js"></script>
 
</head>
<body>
	<div>
		<select name="" id=""></select>省
    <select name="" id=""></select>市
</div>
    <script >
        var data={
            广东省:['东莞','广州','云浮'],
            江西省:['赣州','南昌','临川']
        };
        (function(){
            $.each(data,function(key,e){
                $('select:eq(0)').append(
                    $('<option></option>')
                    .val(key)
                    .text(key)
					)
            })
            $.each(data['广东省'],function(i,e){
                $('select:eq(1)').append(
                    $('<option></option>')
                    .val(e)
                    .text(e)
					)
            })
        }())
        $('select:eq(0)').on('change',function(event){
			var prop=$(this).val();
            $('select:eq(1)').empty();
            $.each(data[prop],function(index,ele){
                $('select:eq(1)').append(
					$('<option></option>')
                    .val(ele)
                    .text(ele)
                )
            })
        })

    </script>
 
</body>
</html>

 

本文地址:https://blog.csdn.net/sofewave_hand_LI/article/details/109263968

《省市二级联动.doc》

下载本文的Word格式文档,以方便收藏与打印。