jsp中动态增加html模块并提交表单的几个问题

最新推荐文章于 2025-08-01 16:49:06 发布

原创最新推荐文章于 2025-08-01 16:49:06 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#spring

javascript 同时被 2 个专栏收录

5 篇文章

订阅专栏

jsp

3 篇文章

订阅专栏

本文介绍了一种在农药检查模块中动态增加抽检子对象的方法。通过DOM操作实现多个实体组合的灵活添加与移除，同时介绍了如何为新增的对象绑定事件及进行表单提交时的数据处理。

对应项目：market

模块：PesticideCheck

案例：动态增加抽检子对象（多个实体组合）

解决方案：依据DOM模型，灵活使用

function addItem(obj) {
            itemId++;
            var item = $(obj).parent().parent().next();
            var group = item.find("div")[0];
            item.append($(group).html());
            var temp = item[item.length - 1];
            var groupOther = item.find("div")[itemId];
            var radioObjY = $(temp).find("input")[0];
            var radioObjN = $(temp).find("input")[1];
      if (item!=1) {
                $(radioObjY).attr("name", "screeningResult" + itemId);
                $(radioObjN).attr("name", "screeningResult" + itemId);
            }


        }

        function removeItem(obj) {
            var divSum = document.getElementById("items").getElementsByTagName("div").length;
            if (divSum != 11) {
                $(obj).parent().parent().parent().remove();
            } else {
                return;
            }




        }

同时，对应的select需要动态增加onchange事件，可以通过

onchange="getCommodityBatchByCommodity(this.value,this)"解决，根据this的父兄弟节点去找到对应二级联动的select

对于表单提交可以采用相同的name属性，并在表单提交controller方法中提交对象和数据，比如：

public String savePesticideCheck(@Valid @ModelAttribute("pesticideCheck") PesticideCheck pesticideCheck, BindingResult result, @RequestParam("shopId") int[] shopId,
                                     @RequestParam("batchId") int[] batchId,@RequestParam("commodityId") int[] commodityId, ModelMap modelMap)