使用 jquery 和 jstl 下拉菜单动态添加/删除更多行答案

【问题标题】：Add/Remove more rows dynamically using jquery and jstl dropdown使用 jquery 和 jstl 下拉菜单动态添加/删除更多行
【发布时间】：2016-08-18 18:14:18
【问题描述】：

我想在单击 addrow 按钮时使用 jQuery 添加带有选择下拉列表的新行。

所以我在我的 jsp 文件中使用 JSTL 标签来创建下拉列表。

当我使用 jQuery 使用 addrow 按钮创建新行时，我希望这个新的下拉列表显示与第一次创建的默认下拉列表相同的值 (countryList)（在单击添加新行之前按钮）。

如何使用 jQuery 创建行？

SimpleFormController：

protected Map referenceData(HttpServletRequest request) throws Exception {
    Map referenceData = new HashMap();
    Map<String,String> country = new LinkedHashMap<String,String>();
    country.put("US", "United Stated");
    country.put("CHINA", "China");
    country.put("SG", "Singapore");
    country.put("MY", "Malaysia");
    referenceData.put("countryList", country);
}

表单：选项：

<form:select path="country">
   <form:option value="NONE" label="--- Select ---"/>
   <form:options items="${countryList}" />
</form:select>

例子：

JSFiddle

注意：以上jsFiddle仅供参考。

【问题讨论】：

因为您已经填充了下拉列表。您可以只使用 jquery .clone() 方法并将其附加到 div 区域。无需再次从后端填充国家/地区列表。

标签： jquery html jsp jstl

【解决方案1】：

你好，这样做应该不是问题：

    //Execute this on button click
$('#countries').append($('<option>',
 {
    value: "China",
    text : "China"
}));

https://jsfiddle.net/b734fgcf/

html和js是在生成jsp之后执行的，应该和普通的HTML Jquery修改一样。如果您想将此数据发送回服务器，则可能存在一些安全问题。祝你好运:)

【讨论】：