jquery 简单2级联动
复习了一下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> 效果图
http://dl.iteye.com/upload/attachment/377058/144d1530-7f43-34e4-9b99-272637350e64.jpg
选择某一个城市
http://dl.iteye.com/upload/attachment/377060/3fbef842-54c0-324f-bf53-04b755722f26.jpg
选中后看它所在的城市
http://dl.iteye.com/upload/attachment/377062/d7fd0d54-3378-3929-81df-0723c563b94c.jpg
页:
[1]