jquery 简单2级联动

最新推荐文章于 2024-07-18 15:45:25 发布

wwwzhouhui

最新推荐文章于 2024-07-18 15:45:25 发布

阅读量179

点赞数

分类专栏： javaweb 文章标签： jQuery Ajax json JavaScript 数据结构 ViewUI

本文链接：https://blog.csdn.net/wwwzhouhui/article/details/83802983

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

复习了一下JQUERY，做了一个JQUERY 实现的2级别联动，主要联系了一下JQUERY 的ajax功能，代码后台数据写死数据结构和之前我的EXTJS2级联动一样采用JSON 数据传输，代码框架也只直接从EXTJS2级联动代码中复制过来的算是struts2+jquery +json吧

主要代码介绍

 $(function(){
			$.ajax({
                url: "getlist.action",
                type: 'POST',
                dataType: 'JSON',
                timeout: 5000,
                error: function() { alert('Error loading data!'); },
                success: function(msg) {
                    $("#province").empty();
                    $.each(eval(msg), function(i, item) {
                        $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#province"));
                    });
                  //  loadCity($("#province").val());
                }
            });
			 $("#province").change(function() {
                loadCity($("#province").val());
            });
			
			function loadCity(parentid) {
                $.ajax({
                    url: 'getlist2.action?id='+ parentid,
                    type: 'POST',
                    dataType: 'JSON',
                    timeout: 5000,
                    error: function() { alert('Error loading data!'); },
                    success: function(msg) {
                        $("#city").empty();
                        $.each(eval(msg), function(i, item) {
                            $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#city"));
                        });
                    }
                });
            }
		})

初始化$.ajax 方法调用后台getlist.action 返回省的数据后写了一个 $("#province").change(function() 事件绑定，省变化后触发loadCity 方法返回市的数据

完整的 test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<html>
	<head>
		<title>ddd</title>
	</head>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript"> 
 		$(function(){
			$.ajax({
                url: "getlist.action",
                type: 'POST',
                dataType: 'JSON',
                timeout: 5000,
                error: function() { alert('Error loading data!'); },
                success: function(msg) {
                    $("#province").empty();
                    $.each(eval(msg), function(i, item) {
                        $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#province"));
                    });
                  //  loadCity($("#province").val());
                }
            });
			 $("#province").change(function() {
                loadCity($("#province").val());
            });
			
			function loadCity(parentid) {
                $.ajax({
                    url: 'getlist2.action?id='+ parentid,
                    type: 'POST',
                    dataType: 'JSON',
                    timeout: 5000,
                    error: function() { alert('Error loading data!'); },
                    success: function(msg) {
                        $("#city").empty();
                        $.each(eval(msg), function(i, item) {
                            $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#city"));
                        });
                    }
                });
            }
		})
 	</script>

	<body>
		<div align="center">
			<select id='province'>
				<option id="provinceonline" value="">
					所有
				</option>
			</select>
			<select id='city'>
				<option id="cityonline" value="">
					所有
				</option>
			</select>

		</div>
	</body>
</html>

效果图

选择某一个城市

选中后看它所在的城市

wwwzhouhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 简单2级联动

复习了一下JQUERY，做了一个JQUERY 实现的2级别联动，主要联系了一下JQUERY 的ajax功能，代码后台数据写死数据结构和之前我的EXTJS2级联动一样采用JSON 数据传输，代码框架也只直接从EXTJS2级联动代码中复制过来的算是struts2+jquery +json吧主要代码介绍 $(function(){ $.ajax({ ...
复制链接

扫一扫