Jquery实现多行的二级联动
2013-10-23 17:28
183 查看
首先，写一个简单的只有一行的例子（以前写的）
第一步：搭建Struts2开发环境，并导入Mysql的驱动包以及JSon使用到的jar包(所有)
第二步：搭建DBUtils环境（以C3P0作为连接池）
第三步：准备用于测试的数据库表和记录
#
# Source for table "t_province"
#
DROP TABLE IF EXISTS `t_province`;
CREATE TABLE `t_province` (
`pid` int(2) NOT NULL AUTO_INCREMENT,
`pname` varchar(12) NOT NULL DEFAULT '',
PRIMARY KEY (`pid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
#
# Data for table "t_province"
#
INSERT INTO `t_province` VALUES (1,'北京市'),(2,'天津市'),(3,'重庆市'),(4,'上海市'),(5,'山东省');
#
# Source for table "t_city"
#
DROP TABLE IF EXISTS `t_city`;
CREATE TABLE `t_city` (
`cid` int(3) NOT NULL AUTO_INCREMENT,
`cname` varchar(18) NOT NULL DEFAULT '',
`pid` int(2) NOT NULL DEFAULT '0',
PRIMARY KEY (`cid`),
KEY `fk_pid` (`pid`),
CONSTRAINT `fk_pid` FOREIGN KEY (`pid`) REFERENCES `t_province` (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
#
# Data for table "t_city"
#
INSERT INTO `t_city` VALUES (1,'海淀区',1),(2,'东城区',1),(3,'西城区',1),(4,'昌平区',1),(5,'朝阳区',1),(6,'天津市',2),(7,'重庆市',3),(8,'上海市',4),(9,'济南市',5),(10,'济宁市',5),(12,'枣庄市',5),(13,'青岛市',5),(14,'烟台市',5),(15,'潍坊市',5),(16,'聊城市',5),(17,'菏泽市',5),(18,'日照市',5);
第四步：创建实体和用于与数据库打交道的Dao
public class Province {
private Integer pid;
private String pname;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
}
public class City {
private Integer cid;
private String cname;
private Integer pid;
public Integer getCid() {
return cid;
}
public void setCid(Integer cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
}
public interface ProVinceCityDao {
public abstract List<Province> getAllProvinces();
public abstract List<City> getCitysByPid(int pid);
}
public class ProVinceCityDaoImpl implements ProVinceCityDao {
@Override
public List<Province> getAllProvinces() {
try {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
return qr.query("SELECT PID,PNAME FROM T_PROVINCE ORDER BY PID",
new BeanListHandler<Province>(Province.class));
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
@Override
public List<City> getCitysByPid(int pid) {
try {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
return qr.query("SELECT CID,CNAME,PID FROM T_CITY WHERE PID=? ORDER BY CID",
new BeanListHandler<City>(City.class),new Object[]{pid});
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
第五步：Action和Struts2的配置文件
@SuppressWarnings("serial")
public class ProvinceCityAction extends ActionSupport {
//接收pid
private Integer pid;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String listProvince() throws Exception {
ProVinceCityDao proVinceCityDao = new ProVinceCityDaoImpl();
List<Province> provices = proVinceCityDao.getAllProvinces();
JSONArray jSONArray = JSONArray.fromObject(provices);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
//向浏览器写数据
response.getWriter().print(jSONArray.toString());
return null;
}
public String listCity() throws Exception {
ProVinceCityDao proVinceCityDao = new ProVinceCityDaoImpl();
List<City> citys = proVinceCityDao.getCitysByPid(this.getPid());
JSONArray jSONArray = JSONArray.fromObject(citys);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print(jSONArray.toString());
return null;
}
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<constant name="struts.devMode" value="true" />
<package name="pro_cty" extends="struts-default">
<action name="procty_*" class="com.sunyanbo.web.action.ProvinceCityAction" method="{1}">
<result name="success">/message.jsp</result>
</action>
</package>
</struts>
第六步：导入JQuery需要的js文件和需要的jsp页面
<html>
<head>
............
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择...</option>
</select>
<select id="city" name="city">
<option value="">请选择...</option>
</select>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.post("${pageContext.request.contextPath}/procty_listProvince.action",function(data,textStatus){
var dataObj = eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
//alert(dataObj[i].pname);
var $option=$("<option></option>");
$option.attr("value",dataObj[i].pid);
$option.text(dataObj[i].pname);
$("#province").append($option);
}
});
//省的变化引起城市的变化
$("#province").change(function(){
var pid = this.value;
$.post("${pageContext.request.contextPath}/procty_listCity.action",{pid:pid},function(data,textStatus){
$("#city option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
var dataObj = eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
//alert(dataObj[i].pname);
var $option=$("<option></option>");
$option.attr("value",dataObj[i].cid);
$option.text(dataObj[i].cname);
$("#city").append($option);
}
});
});
});
</script>
</html>
好了，看完这个例子，进入今天的问题
需求是，选择一个软件项目过程，显示它包含的任务信息。例如，项目规划阶段，包括需求分析，概要设计等；项目执行阶段，包括编码、测试等。
一个页面有多行，JS代码如下：
<script type="text/javascript">
function changeJobTask(process){
var processId = $(process).val();
//获取当前列所在的行，并在该行寻找class为jobTask1的节点
var $tempObj = $(process).parent().parent().children().find(".jobTask1");
$.post("${pageContext.request.contextPath}/workLogAction/doShowTaskByProId.do",{processId:processId},function(data,textStatus){
$tempObj.find("option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
/**字符串转换成json对象*/
var dataObj = eval('(' + data + ')');
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].taskName);
$option.text(dataObj[i].taskName);
$tempObj.append($option);
}
});
}
</script>
使用方法：
<!--第一行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" onchange="changeJobTask(this)">
<option value="" selected="selected">--请选择--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
<!--第二行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" onchange="changeJobTask(this)">
<option value="" selected="selected">--请选择--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
<!--第三行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" onchange="changeJobTask(this)">
<option value="" selected="selected">--请选择--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
【Jquery获取节点名称的方法】$('#elementId').get(0).tagName
第一步：搭建Struts2开发环境，并导入Mysql的驱动包以及JSon使用到的jar包(所有)
第二步：搭建DBUtils环境（以C3P0作为连接池）
第三步：准备用于测试的数据库表和记录
#
# Source for table "t_province"
#
DROP TABLE IF EXISTS `t_province`;
CREATE TABLE `t_province` (
`pid` int(2) NOT NULL AUTO_INCREMENT,
`pname` varchar(12) NOT NULL DEFAULT '',
PRIMARY KEY (`pid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
#
# Data for table "t_province"
#
INSERT INTO `t_province` VALUES (1,'北京市'),(2,'天津市'),(3,'重庆市'),(4,'上海市'),(5,'山东省');
#
# Source for table "t_city"
#
DROP TABLE IF EXISTS `t_city`;
CREATE TABLE `t_city` (
`cid` int(3) NOT NULL AUTO_INCREMENT,
`cname` varchar(18) NOT NULL DEFAULT '',
`pid` int(2) NOT NULL DEFAULT '0',
PRIMARY KEY (`cid`),
KEY `fk_pid` (`pid`),
CONSTRAINT `fk_pid` FOREIGN KEY (`pid`) REFERENCES `t_province` (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
#
# Data for table "t_city"
#
INSERT INTO `t_city` VALUES (1,'海淀区',1),(2,'东城区',1),(3,'西城区',1),(4,'昌平区',1),(5,'朝阳区',1),(6,'天津市',2),(7,'重庆市',3),(8,'上海市',4),(9,'济南市',5),(10,'济宁市',5),(12,'枣庄市',5),(13,'青岛市',5),(14,'烟台市',5),(15,'潍坊市',5),(16,'聊城市',5),(17,'菏泽市',5),(18,'日照市',5);
第四步：创建实体和用于与数据库打交道的Dao
public class Province {
private Integer pid;
private String pname;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
}
public class City {
private Integer cid;
private String cname;
private Integer pid;
public Integer getCid() {
return cid;
}
public void setCid(Integer cid) {
this.cid = cid;
}
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
}
public interface ProVinceCityDao {
public abstract List<Province> getAllProvinces();
public abstract List<City> getCitysByPid(int pid);
}
public class ProVinceCityDaoImpl implements ProVinceCityDao {
@Override
public List<Province> getAllProvinces() {
try {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
return qr.query("SELECT PID,PNAME FROM T_PROVINCE ORDER BY PID",
new BeanListHandler<Province>(Province.class));
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
@Override
public List<City> getCitysByPid(int pid) {
try {
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
return qr.query("SELECT CID,CNAME,PID FROM T_CITY WHERE PID=? ORDER BY CID",
new BeanListHandler<City>(City.class),new Object[]{pid});
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
第五步：Action和Struts2的配置文件
@SuppressWarnings("serial")
public class ProvinceCityAction extends ActionSupport {
//接收pid
private Integer pid;
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String listProvince() throws Exception {
ProVinceCityDao proVinceCityDao = new ProVinceCityDaoImpl();
List<Province> provices = proVinceCityDao.getAllProvinces();
JSONArray jSONArray = JSONArray.fromObject(provices);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
//向浏览器写数据
response.getWriter().print(jSONArray.toString());
return null;
}
public String listCity() throws Exception {
ProVinceCityDao proVinceCityDao = new ProVinceCityDaoImpl();
List<City> citys = proVinceCityDao.getCitysByPid(this.getPid());
JSONArray jSONArray = JSONArray.fromObject(citys);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print(jSONArray.toString());
return null;
}
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"/>
<constant name="struts.devMode" value="true" />
<package name="pro_cty" extends="struts-default">
<action name="procty_*" class="com.sunyanbo.web.action.ProvinceCityAction" method="{1}">
<result name="success">/message.jsp</result>
</action>
</package>
</struts>
第六步：导入JQuery需要的js文件和需要的jsp页面
<html>
<head>
............
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择...</option>
</select>
<select id="city" name="city">
<option value="">请选择...</option>
</select>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.post("${pageContext.request.contextPath}/procty_listProvince.action",function(data,textStatus){
var dataObj = eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
//alert(dataObj[i].pname);
var $option=$("<option></option>");
$option.attr("value",dataObj[i].pid);
$option.text(dataObj[i].pname);
$("#province").append($option);
}
});
//省的变化引起城市的变化
$("#province").change(function(){
var pid = this.value;
$.post("${pageContext.request.contextPath}/procty_listCity.action",{pid:pid},function(data,textStatus){
$("#city option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
var dataObj = eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
//alert(dataObj[i].pname);
var $option=$("<option></option>");
$option.attr("value",dataObj[i].cid);
$option.text(dataObj[i].cname);
$("#city").append($option);
}
});
});
});
</script>
</html>
好了，看完这个例子，进入今天的问题
需求是，选择一个软件项目过程，显示它包含的任务信息。例如，项目规划阶段，包括需求分析，概要设计等；项目执行阶段，包括编码、测试等。
一个页面有多行，JS代码如下：
<script type="text/javascript">
function changeJobTask(process){
var processId = $(process).val();
//获取当前列所在的行，并在该行寻找class为jobTask1的节点
var $tempObj = $(process).parent().parent().children().find(".jobTask1");
$.post("${pageContext.request.contextPath}/workLogAction/doShowTaskByProId.do",{processId:processId},function(data,textStatus){
$tempObj.find("option").each(function(index,domEle){
if(index != 0){
$(this).remove();
}
});
/**字符串转换成json对象*/
var dataObj = eval('(' + data + ')');
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].taskName);
$option.text(dataObj[i].taskName);
$tempObj.append($option);
}
});
}
</script>
使用方法：
<!--第一行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" onchange="changeJobTask(this)">
<option value="" selected="selected">--请选择--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
<!--第二行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" onchange="changeJobTask(this)">
<option value="" selected="selected">--请选择--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
<!--第三行-->
<tr align="center" >
<!---其他列->
<select id="processName1" name="processName1" onchange="changeJobTask(this)">
<option value="" selected="selected">--请选择--</option>
<c:forEach items="${pProcesss}" var="pProces">
<option value="${pProces.id}">${pProces.processName}</option>
</c:forEach>
</select>
</td>
<td width="8%">
<select class="jobTask1" name="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
【Jquery获取节点名称的方法】$('#elementId').get(0).tagName
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery的ajax实现二级联动
- Springboot+Mybatis+Jquery实现自定义二级联动
- jQuery实现省市区二级联动代码
- jQuery实现二级联动下拉框
- ASP.NET jQuery 食谱24 (通过AJAX简单实现DropDownList二级联动)
- jquery实现二级联动
- JQuery技术初探之二级联动的设计与实现
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- JQuery实现的简单城市间二级联动
- JQuery实现添加删除数据全选反选隔行变色二级联动
- jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- jquery使用jquerydoubleselectmin.js实现二级菜单联动
- 二级联动(jQuery实现)
- jquery+json实现数据二级联动的方法
- jQuery+PHP+MySQL实现二级联动下拉菜单
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- jquery实现二级联动，实时查询数据库
- 用户管理的设计_jquery的ajax实现二级联动效果
- 基于jquery的二级联动菜单实现代码