二级联动添加功能

最新推荐文章于 2022-04-13 21:17:34 发布

轩儿哥

最新推荐文章于 2022-04-13 21:17:34 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

分类专栏：二级联动添加文章标签：二级联动添加

本文链接：https://blog.youkuaiyun.com/weixin_42345170/article/details/85156784

二级联动添加专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用JSP、Ajax和SQL实现商品信息的二级联动添加功能，包括界面设计、控制层处理、操作层SQL语句编写及联动效果实现。

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

首先我们先建立add.jsp界面

<form action="add" method="post">

<table>

  <tr>
  
    <td>编号:<input type="text" name="eid"></td>
    
  </tr>
  
  <tr>
  
    <td>产品名称:<input type="text" name="ename"></td>
    
  </tr>
  <tr>
    <td>商品名称:
	<select onchange="yiji()" id="one" name="yilei">
		<c:forEach items="${san}" var="u">
			<option value="${u.sname}">${u.sname }</option>
		</c:forEach>
	</select>
	</td>
</tr>
<tr>
	<td>
		<select id="two" name="erlei">
			<option>请选择</option>
		</select>
	</td>
 <tr>
    <td>数量:<input type="text" name="num"></td>
  </tr>
  <tr>
    <td>
      <input type="submit" value="添加">
    </td>
  </tr>
</table>
</form>

一般二级联动对用到ajax来实现

function yiji() {
	var one=$("#one option:selected").val();
	$("#two").empty();
	$.post(
		"erji",
		{one:one},
		function(msg) {
			for ( var i in msg) {
				$("#two").append("<option value="+msg[i].sname+">"+msg[i].sname+"</option>")
			}
		},
		"json"
	);
}

接着我们到控制层去写我们要控制的表格(数据库)

@RequestMapping(“toadd”)
public String toadd(HttpServletRequest request) {
List slist=mapper.san();
request.setAttribute(“san”, slist);
return “add”;
}

@RequestMapping("erji")
@ResponseBody
public List<San> erji(HttpServletRequest request,String one) {
	San s = mapper.erji(one);
	List<San> sslist = mapper.sslist(s.getSid());
	return sslist;
}
@RequestMapping("add")
public String add(Er ee){
	mapper.add(ee);
	return "redirect:list";
}

接着我们到操作层去书写操作的SQL语句

@Select(“select * from san where pid=0”)
List san();

@Insert(“insert into er(eid,ename,yilei,erlei,num) values(#{eid},#{ename},#{yilei},#{erlei},#{num})”)
void add(Er ee);

@Select(“select * from san where sname=#{one}”)
San erji(String one);

@Select(“select * from san where pid=#{sid}”)
List sslist(int sid);

返回list.jsp页面在列表进行添加功能

		<input type="button" value="新增" onclick="add()">

function add(){

	location="toadd";
}

这样的一个二级联动添加就做好了