11级_Java_曹建波 04.07 jQuery easyUI tree +struts2+hibernate +mysql 实现三级联动的案例

来源：互联网发布：大数据与医疗编辑：程序博客网时间：2024/05/17 22:48

index.jsp

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/js/select.js"></script><body>    <div align="center">    <div>    <select id="province">    <option value="-1">请选择省</option>    </select>    <select id="city">    <option value="-1">请选择市</option>    </select>    <select id="country">    <option value="-1">请选择镇</option>    </select>    </div>    </div>  </body>

Select.js

$(document).ready(function() {// 这是jQuery中第一个ajax案例$.ajax({async : true, // 代表异步发送请求type : "GET", // 采用发送请求的方式 GET 或者POSTurl : "./csdn/ProvinceAction_query.action?time=" + new Date().getTime(), // 设置请求的路径dataType : "json", // 服务预返回的数据格式 json html xml text等success : function(data, textStatus) { // 成功回调函数// 获取所有的省var jsonpros = data.provinces;// 遍历省for (var i = 0; i < jsonpros.length; i++) {// 获取具体的省var jsonpro = jsonpros[i];// 创建一个option的元素节点var $optpro = $("<option></option>");// 设置其属性$optpro.attr("value", jsonpro.pid);// 设置文本$optpro.text(jsonpro.pname);// 把创建的option省节点添加到省的selete节点中$("#province").append($optpro);}},error : function(xhr, textStatus, errorThrown) {// 失败回调函数}});// 这是jQuery中第二个ajax案例// 当省发生变化的时候 触发操作$("#province").bind("change", function() {// 清空数据$("#city").empty();$("#country").empty();// 传递的数据var pid = $("#province").val();$.get("./csdn/CityAction_query.action?time="+ new Date().getTime(),// url 请求的路径{pid : pid}, // data 请求传递的参数function(data) { // 成功时 回调的函数// 得到所有的市var jsoncities = data.cities;for (var i = 0; i < jsoncities.length; i++) {// 获取具体的市var jsoncity = jsoncities[i];// 创建一个option的元素节点var $optcity = $("<option></option>");// 设置其属性$optcity.attr("value", jsoncity.cid);// 设置文本$optcity.text(jsoncity.cname);// 把创建的option市节点添加到市的select节点中$("#city").append($optcity);}}, "json"); // type:返回的数据类型});// 这是jQuery中第三个ajax案例$("#city").bind("change", function() {//清空数据$("#country").empty(); //第一个不清除// 请求的参数var cid = $("#city").val();// 发送ajax$.post("./csdn/CountryAction_query.action?time="+ new Date().getTime(), {cid : cid}, function(data) {// 得到所有的城镇var jsoncountries = data.countries;// 遍历所有的城镇for (var i = 0; i < jsoncountries.length; i++) {// 获取具体的市var jsoncountry = jsoncountries[i];// 创建一个option的元素节点var $optcountry = $("<option></option>");// 设置其属性$optcountry.attr("value", jsoncountry.tid);// 设置文本$optcountry.text(jsoncountry.tname);// 把创建的option城镇节点添加到城镇的select节点中$("#country").append($optcountry);}}, "json");});});

11级_Java_曹建波 04.07 jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例

11级_Java_曹建波 04.07 jQuery easyUI tree +struts2+hibernate +mysql 实现三级联动的案例