如何动态的添加下拉菜单跟复选框及submit与button的使用差别

前言

需求：需要单独给每个店铺定制商品主类别跟副类别，然后再商品发布的时候，需要选择属于主类别跟副类别的选项。

直接上图看需求吧！

看完图，应该很清晰了，主类别采用下拉菜单，副类别采用的是复选框，通过在对应店铺内定制主副类别，可以在商品发布时，选择商品属于的类别。

正文

首先我们来看一下数据库是怎么设置的吧，字段shop_id,category_name,flag分别表示类别名，店铺Id，flag=1是主类别，0是副类别。对应的输入了几组数组来配合我们的实验。

接下来我们来看看主类别的图背后的jsp页面是怎么设计的：

整张图，我们可以分两个部分，来看：

（1）点击进来以后，需要先查询数据库，把对应店铺的商品主类别找出来，然后把数据扔给Category，然后由它依次显示出来。

（2）我们可以在图中横线处填写我们需要的主类别名称，然后点击确认提交，重新刷新页面，显示提交完以后的数据，其实，这里又有两个操作，一个是操作时插入数据，另一个是查询，然后才能显示更新以后的页面。

我们先来看看第一个步骤，查询商品类别，我们直接在上图点击商品类别编辑：

可以看到，我们把shop_id参数一并提交给servlet/CateListServlet进行处理了，那么继续我们看到servlet具体做了什么？

上图里，我们具体做的就是先定义一个list，然后查询类别，通过shop_id和flag两个参数，先查询的是主类别，因此flag=1，然后我们request.getSession().setAttribute("Category", list_1); 把数据赋给Category，然后再由jsp页面的 <c:forEach items="${Category }" var="c" varStatus="status">来分别显示数据，其中引入<c:forEach></c:forEach>要注意一定要引入标签<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>，还要引入两个架包，具体看这个博客地址http://blog.csdn.net/u011958281/article/details/74216015，里面有详细的导包过程，不导入，会提醒，但是不报错，可是你的结果就是出不来，很苦恼。这一点一定要注意！！

接下来我们看第二个步骤，怎么动态添加类别：

添加：<input type="text" name="cate_1" class="bg" />

<input type="submit" value="确定" >

<form method="post"

action="${pageContext.request.contextPath}/servlet/AddCategoryServlet?flag=1">

可以看到，点击提交submit以后，会把执行${pageContext.request.contextPath}/servlet/AddCategoryServlet?flag=1，并且把flag=1参数传给后台，告诉它是做主类添加。

这里有一个小细节， <input type="submit" value="确定" > type=“submit”，它会默认执行form 里面的action里面的方法，并且把form内的数据全部提交给后台，后台就可以接受到了，这里提交的是<input type="text" name="cate_1" class="bg" />，参数名是name="cate_1"，还有一个是通过地址传过去的flag=1，

后台接收：

String category_name = request.getParameter("cate_1");

int flag =Integer.parseInt(request.getParameter("flag")) ;

这样就可以接收到前台的数据参数，因为都是默认String类型，所以需要转一下Int类型。

但是有时候我们需要点击以后不是执行submit提交，而是执行另外的任务，那么我们type=“button”，而改成这个以后，再次点击，发现后台无论如何都得不到前台的category_name参数，flag可以，因为通过地址传过去的，与form无关，button是无法提交form内的数据的，因此，有时候，大家一定要注意这两个的用法。

大家可以看到，如果我要删除一条记录怎么办，也是在form内的，如果我们写type=“button”，那么对不起，无论如何，也执行不了删除的功能，只会默认执行form内的action方法，那么我们要怎么做呢，改成button，这样才能执行我们的删除servlet，在这里我没有这么做，我是通过<a></a>超链接来做的：

<td align="center" style="HEIGHT: 22px" width="7%"><a

href="${pageContext.request.contextPath}/servlet/DeleteCatesServlet?shop_id=${shop.id }&name=${c.category_name}">

<img

src="${pageContext.request.contextPath}/admin/images/i_edit.gif"

border="0" style="CURSOR: hand">

</a></td>

我通过传店铺id跟类别名来删除类别：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

request.setCharacterEncoding("UTF-8");

ShopService ss = new ShopServiceImpl();

String name = request.getParameter("name");

int shop_id = Integer.parseInt(request.getParameter("shop_id"));

int i = ss.deleteCate(shop_id, name);

if(i==1){

System.out.println("删除了"+name+"商品类别信息！");

request.getRequestDispatcher("/servlet/CateListServlet").forward(request, response);

}

}

具体的删除操作大家应该都熟悉，主要就是在一个form内的不同<input type="">到底是submit还是button,这两个的区别，

最后我跳转到request.getRequestDispatcher("/servlet/CateListServlet").forward(request, response);这个servlet执行查询类别，最后显示出来了。

副类别跟主类别一样的思想，大家参考主类别就可以了。

最后，就是我们如何动态的显示下拉菜单跟复选框！

再看一遍效果图：

下面我就直接上代码了，因为还是一个forEach，步骤跟之前的一样：

<tr>

<td align="center" bgColor="#f5fafe" class="ta_01">商品主类别：</td>

<td bgColor="#ffffff"><select name = "CategorySelect" >

<option value="" selected="selected">--------------选择--------------</option>

<c:forEach items = "${Category_1 }" var = "c">

<option value="${c.category_name }">${c.category_name }</option>

</c:forEach>

</select>

<td align="center" bgColor="#f5fafe" class="ta_01">商品副类别：</td>

<td bgColor="#ffffff">

<c:forEach items = "${Category_0}" var = "ca" varStatus="vs">

<input type = "checkbox" value ="${ca.category_name }" name="name">${ca.category_name }

<c:if test="${(vs.index+1)%8 == 0}">

<br />

</c:if>

</c:forEach>

</tr>

这就是关键的两个显示的代码，大家可以直接复制， <c:forEach items = "${Category_1 }" var = "c">， <c:forEach items = "${Category_0}" var = "ca" varStatus="vs">这两处的${Category_1 }${Category_0}，都是通过后台查询，然后分别把查询的List数据赋值一下就可以了，到此我们局可以看到，这个过程结果就出现了，做了整整两天，前期也纠结了好久怎么实现，对了还有一个小问题也是里面出来的，但是跟题无关，但是一旦发生很难找到，也是关于这个赋值的问题，不报错，但是后台就是得不到值。

看图name="capacity "有没有注意“ ”里面是空了一格，因此在后台你用request.getParameter("capacity");会发现无论如何你得不到这个参数的值，你也不会对这个小小的空格产生疑惑吧，就是这样的一个空格，导致你可能大白天都出不来结果！我也遇到了，因为之前也遇到过，所以试了几次就看出来了。大家一定要自己注意！