下拉列表select的联动选择

最近根据项目中的业务需求，要实现如下的一个匹配功能：页面的显示效果如上图。具体的功能为：当点击下拉列表选择一个空间时，首先会在表格的下方追加一行，然后追加一个部件的下拉列表，这个其实是很好实现的。点击部件的下拉列表，会把选中部件的详细信息显示到已经追加好的同一行中，这个功能其实也不难操作。这个功能的难点在于：空间时可以重复选择的，同时部件也是可以重复选择的，即在后台数据库中要存入的数据是空间--部件的多对多的实现。

现将已配置的代码分享如下：

前台jsp的代码:

<script type="text/javascript">
$(function(){
//上一页
$("#back").click(function(){
var spaceList = new Array();
var productList = new Array();
var counts = new Array();
//获取所有的空间编号:td,name为类级别的选择器,故可以使用each()函数;其子系统在each()中利用$(this)即可调用
$("tr[name='selectRow']").each(function(){
/* alert($(this).children(".space_id").attr("id")); */
spaceList.push($(this).children(".space_id").attr("id"));
counts.push($(this).children().children(".count").val());
})

//获取所有部件编号,带着最后一个选中的空间编号,要剔除掉
var productList = new Array();
$("option:selected").each(function(){
productList.push($(this).attr("id"));//部件编号集合
})

var list = new Array();
for (var i = 0; i < spaceList.length; i++) {
var productused = {};//后台实体类要接受的对象值,实体类要有对应
productused.addr_code = $("#addr_code").val();
productused.space_id = spaceList[i];
productused.product_code = productList[i+1];
productused.product_used = counts[i];
productused.by_layout = 1;

list.push(productused);
}

var plist = JSON.stringify(list);
if(plist.length<3){//此处是根据未填入数据时报出数组长度所判断
location.href="<%=request.getContextPath() %>/project/prePage.action?pageNo="+$("#pageNo").val()+"&addr_code="+$("#addr_code").val();
}else{
$.ajax({
url:"saveProject_product.action",
type:"post",
dataType:"json",
data:{
"plist":plist
},
success:function(data){
if(data){
//在进入下一页前,先将修改的数据进行保存
location.href="<%=request.getContextPath() %>/project/prePage.action?pageNo="+$("#pageNo").val()+"&addr_code="+$("#addr_code").val();
}
}
})
}
})

//初始化加载空间
$.ajax({
url:"<%=request.getContextPath() %>/project/getSpaceList.action",//追加所有的空间
type:"post",
dataType:"json",
data:{},
success:function(data){
for(var i=0;i<data.length;i++){
$("#space").append("<option id='"+data[i].space_id+"'>"+data[i].space_name+"</option>");
}
}
})

//选取空间的改变事件
$("#space").change(function(){
/* alert("空间编号\t"+$("select[name='space']").find('option:selected').attr("id")); */
$.ajax({
url:"<%=request.getContextPath() %>/project/getSpace.action",
type:"post",
dataType:"json",
data:{
"space_id":$("select[name='space']").find('option:selected').attr("id")
},
success:function(data){//某个空间值
//追加部件信息
$.ajax({
url:"<%=request.getContextPath() %>/project/getProductList.action",//追加所有的部件
type:"post",
dataType:"json",
data:{},
success:function(data2){
//先追加1行
var i =0;
$("#row").after("<tr name='selectRow' '><th name='space_id,"+data.space_id+"' id='"+data.space_id+"' class='space_id'>"+data.space_name+"</th><th><select id='product' name='product,"+data.space_id+"' style='width: 70%;text-align: center;' class='product'><option>请选择部件</option></select></th><th class='product_unit' name='product_unit,"+data.space_id+"' ></th><th><input type='text' name='count,"+data.space_id+"' class='count'></th><th class='product_texture' name='product_texture,"+data.space_id+"'></th><th ><img class='product_pic_url' name='product_pic_url,"+data.space_id+"' width='120px' height='80px' alt='产品图片'></th><th class='product_area' name='product_area,"+data.space_id+"'></th><th><input type='button' value='删除' name='del,"+data.space_id+"'></th></tr>")
//将部件的集合追加,先清空
$("select[name='product,"+data.space_id+"']").empty();
for(var i=0;i<data2.length;i++){
$("select[name='product,"+data.space_id+"']").append("<option id='"+data2[i].product_code+"' value='"+data2[i].product_code+"'>"+data2[i].product_name+"</option>");
}

//选取部件的改变事件
$("select[name='product,"+data.space_id+"']").change(function(){
/* alert("部件编号\t"+$("select[name='product']").find('option:selected').attr("id")); */
var code = $("select[name='product,"+data.space_id+"']").find('option:selected').attr("id");
$.ajax({
url:"<%=request.getContextPath() %>/project/getProduct.action",
type:"post",
dataType:"json",
data:{
"product_code":code
},
success:function(data3){ //多层ajax嵌套,注意返回值名称要区别.id值对于全局来说是重复的,但对于单词操作是唯一的,所以向下进行
/* alert("部件信息为"+data3.product_code+"部件名称:"+data3.product_name); */
//在追部件时,先清空,后追加,防止在同一行多次追加.
// 存留bug:用id作为选择器,只能操作最新加载的一行,如果之前行要再次操作,目前用id作选择器是无效的

$("th[name='space_id,"+data.space_id+"']").each(function(){ //同一空间编号下会有多个部件选择
if(data3.product_code==$(this).next().find('option:selected').attr("id")){
/* alert("选中编号为"+data3.product_code); */
$(this).siblings(".product_unit").empty();
$(this).siblings(".product_texture").empty();
$(this).siblings(".product_area").empty();
$(this).siblings(".product_pic_url").empty();

$(this).siblings(".product_unit").append(data3.product_unit);
$(this).siblings(".product_texture").append(data3.product_texture);
$(this).siblings(".product_area").append(data3.product_area);
$(this).siblings(".product_pic_url").attr("src",data3.product_pic_url);
}

});

$("input[name='del,"+data.space_id+"']").each(function(){
$(this).click(function(){
$(this).parent().parent().remove();//此处删除取消按键所在的当前行的值,此处因使用的是层级选择器,所以只删除的当前行
})
})
}
})
});

}
})
}
})
});

//下一页,并提交数据
$("#next").click(function(){
var spaceList = new Array();
var productList = new Array()
4000
;
var counts = new Array();
//获取所有的空间编号:td,name为类级别的选择器,故可以使用each()函数;其子系统在each()中利用$(this)即可调用
$("tr[name='selectRow']").each(function(){
/* alert($(this).children(".space_id").attr("id")); */
spaceList.push($(this).children(".space_id").attr("id"));
counts.push($(this).children().children(".count").val());
})

//获取所有部件编号,带着最后一个选中的空间编号,要剔除掉
var productList = new Array();
$("option:selected").each(function(){
productList.push($(this).attr("id"));//部件编号集合
})

var list = new Array();
for (var i = 0; i < spaceList.length; i++) {
var productused = {};//后台实体类要接受的对象值,实体类要有对应
productused.addr_code = $("#addr_code").val();
productused.space_id = spaceList[i];
productused.product_code = productList[i+1];
productused.product_used = counts[i];
productused.by_layout = 1;

list.push(productused);
}

var plist = JSON.stringify(list);
/* alert("plist"+plist);
return; */
if(plist.length<3){//此处是根据未填入数据时报出数组长度所判断
location.href="<%=request.getContextPath() %>/project/nexPage.action?pageNo="+$("#pageNo").val()+"&addr_code="+$("#addr_code").val();
}else{
$.ajax({
url:"saveProject_product.action",
type:"post",
dataType:"json",
data:{
"plist":plist
},
success:function(data){
if(data){
//在进入下一页前,先将修改的数据进行保存
location.href="<%=request.getContextPath() %>/project/nexPage.action?pageNo="+$("#pageNo").val()+"&addr_code="+$("#addr_code").val();
}
}
})
}

})

})

//回显后的删除功能
function del(space_id,product_code){
/* alert(space_id+"\t"+product_code); */
console.log($(this).parent().parent().html());
/* $(this).parent().parent().val();
return; */
$.ajax({
url:"<%=request.getContextPath() %>/project/delSpaceProduct.action",
type:"post",
dataType:"json",
data:{
"addr_code":$("#addr_code").val(),
"space_id":space_id,
"product_code":product_code
},
success:function(data){
if(data){
location.reload();
}else{
alert("删除部件失败");
location.reload();
}
}
})
}
</script>
</head>
<body style="width: auto; heigh: 500px">
<div class="head" style="border: 1px red; width: auto; heigh: 50px;text-align: center;">
<input type="hidden" value="${bs.addr_code }" id="addr_code">
<span style="font-size: 30px">${bs.provice }省、${bs.city }市、${bs.address }</span>
<img alt="安馨之家" src="<%=request.getContextPath() %>/images/安馨之家.png"
style="float: right">
</div>
<div><span style="border: 3px black">=======================================================================</span></div>
<div style="width: auto;height: 500px;" class="main">
<div class="top">
<h3 style="color: green;" align="center">介助预防企划——适老化改造针对性问题解析</h3>
</div>
<div class="foot" >
<table align="center" border="1" width="90%" height="430px">
<tr>
<th colspan="8" width="100%" height="50px">根据老人适老化改造支援等级评定及户内存在的问题，按“介助预防”等级配置</th>
</tr>
<tr height="50px" id="row">
<th>
<select id="space" style="width: 70%;text-align: center;" name="space">
<option id="kongjian">空间名称</option>
</select>
</th>
<th>部件与设备</th>
<th>单位</th>
<th>数量</th>
<th>材质</th>
<th>图片</th>
<th>产地</th>
<th>操作</th>
</tr>
<c:forEach var="p" items="${proList }">
<tr>
<th>${p.space_name }</th>
<th>${p.product_name }</th>
<th>${p.product_unit }</th>
<th>${p.product_used }</th>
<th>${p.product_texture }</th>
<th><img src="${p.product_pic_url }" width="120px" height="80px"></th>
<th>${p.product_area }</th>
<th><input type="button" value="删除" onclick="del(${p.space_id},${p.product_code})"></th>
</tr>
</c:forEach>
</table>
</div>
<div style="width: 90%;height: 50px;margin-top: 10px;margin-left: 100px">
<input type="button" value="上一页" id="back" style="float: left;margin-left: 50px" onclick="">
<input type="button" value="下一页" id="next" style="float: right;margin-right: 50px">
<input type="hidden" id="pageNo" value="9">
</div>
</div>
</body>
</html> 现在实现的功能包括:可以实现空间与部件的多对多的加载，但当同一空间选择不同部件时，最新加载的部件的选择会影响之前同一空间的部件的配置信息，而之前空间的部件的再次选择会失效。删除按钮可实现只删除同一行的信息。