省市县三级联动案例-ajax小案例

最新推荐文章于 2022-08-05 19:48:55 发布

不落不息

最新推荐文章于 2022-08-05 19:48:55 发布

阅读量194

点赞数

分类专栏： # ajax 文章标签： jquery ajax

本文链接：https://blog.csdn.net/weixin_43416215/article/details/108930934

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

条件：wamp集成环境运行的情况下
结果示意：
在这里插入图片描述
文件目录：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省市县三级联动</title>
	<style>
		.container{
			width: 600px;
			min-height: 300px;
			background-color:#FFEBCD;
			margin:auto auto;
			text-align: center;
			padding: 10px;
			color: #8B4513;
		}
		select{
			border:1px solid #fff;
			width: 130px;
			height: 20px;
			color: #8B4513;
			font-weight: lighter;
		}
		label{
			margin: 0 5px;
		}
	</style>
	<script type="text/javascript" src="js/jquery.js">
	</script>
	<script>
	$(function(){
		// 公用方法
        function queryData(obj,callback){
            $.ajax({
                type:'get',
                url:'select.php',
                data:obj,
                dataType:'json',
                success:function(data){
                    callback(data);
                }
            });
        }

        //加载省级数据
		queryData({
			flag:1
		},function(data){
			// console.log(data);
			var option = '';
			$.each(data,function(i,e){
				option +='<option value="'+e.id+'">'+e.province+'</option>';
			});
			$("#province").append(option);
		});

		//市级数据请求
        $('#province').change(function(){
        	//清除上次查询的残留数据，保留开始第一条
            $("#city").find('option:gt(0)').remove();
            $("#county").find('option:gt(0)').remove();
            queryData({
                flag:2,
                pId:$(this).val()
            },function(data){
            	// console.log(data);
                var option = '';
                $.each(data,function(i,e){
                    option += '<option value="'+e.id+'">'+e.city+'</option>';
                });
                $("#city").append(option);
            });
        });

        //县级数据请求
        $('#city').change(function(){
            queryData({
                flag:3,
                cId:$(this).val()
            },function(data){
            	// console.log(data);
                var option = '';
                $.each(data,function(i,e){
                    option += '<option value="'+e.id+'">'+e.county+'</option>';
                });
                $("#county").append(option);
            });
        });
	});
    </script>
</head>
<body>
	<div class="container">
		<label>
			省：<select id="province">
				<option>请选择省 . . .</option>
			</select>
		</label>
		<label>
			市：<select id="city">
				<option>请选择市 . . .</option>
			</select>
		</label>
		<label>
			县：<select id="county">
				<option>请选择县 . . .</option>
			</select>
		</label>
	</div>
</body>
</html>

不落不息

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
省市县三级联动案例-ajax小案例

条件：wamp集成环境运行的情况下结果示意：文件目录：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省市县三级联动</title> <style> .container{ width: 600px; min-height: 300px; background-color:#FFEBCD;
复制链接

扫一扫