下拉列表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();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>

现在实现的功能包括:可以实现空间与部件的多对多的加载，但当同一空间选择不同部件时，最新加载的部件的选择会影响之前同一空间的部件的配置信息，而之前空间的部件的再次选择会失效。删除按钮可实现只删除同一行的信息。