下拉列表select的联动选择_th的内容随着select联动-CSDN博客

本文链接：https://blog.csdn.net/linux__xu/article/details/72997531

本文介绍了如何实现一个页面功能，当用户在下拉列表中选择空间后，表格下方会添加新行并显示部件的下拉列表。部件的选定会将详细信息展示在同一行。此功能支持空间和部件的多对多重复选择，涉及前端动态追加行和后端多对多数据存储的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

前台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",