jquery 简单2级联动

wwwzhouhui · 发表于 2013-1-29 11:34:33

复习了一下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>     效果图

选择某一个城市

选中后看它所在的城市

		自动登录	找回密码
密码			立即注册