省市二级联动

最新推荐文章于 2023-07-25 20:38:09 发布

a_pav

最新推荐文章于 2023-07-25 20:38:09 发布

阅读量145

点赞数

分类专栏： jQuery 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/sofewave_hand_LI/article/details/109263968

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

a_pav

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市二级联动

<!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>.
复制链接

扫一扫