欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

省市二级联动

程序员文章站 2022-03-22 10:12:51
用户中心....
<!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