javascript - 使用 JavaScript/JQuery 动态添加 Struts 2 选择下拉列表

Question

我有一个student.jsp页面，可以从数据库 Faculty 中加载一个选择下拉列表

<s:select list="ftyList" name="fid" listKey="fid" listValue="name" label="Select a Faculty" />

现在，当我单击“添加”按钮时，我必须添加更多完全相同的下拉列表。为此，我有一个div添加按钮和我的 JavaScript 代码，如下所示：

<div id="div">
    <button onclick="addListFunction()">Add</button>
</div>

addDropDown.js：

function addListFunction() {    
    var d = document.getElementById("div");
    d.innerHTML += "<p><s:select list='ftyList' name='fid' listKey='fid' listValue='name' label='Select a Faculty' /></p>";
}

问题是，当我单击“添加”按钮时，它只会添加一个空白区域。使用 firebug 时，我可以看到打印的 Struts 标记与上面相同，而不是 HTML 标记。

Answer 1

<s:select>是一个 struts 标记，不能直接从 javascript 添加并假定在服务器端运行。

单击添加按钮时，您可以使用jQuery Clone 方法。

<s:select list="ftyList" name="fid" listKey="fid" listValue="name" cssClass="fidSelect" label="Select a Faculty" />

function addListFunction() {    
    $('.fidSelect').clone().insertAfter(".fidSelect");
}

Answer 2

你可以试试这个 uisng jQuery

function addListFunction() {

var optionList = [{"key":"1" , "value":"item1"},
                  {"key":"2" , "value":"item2"},
                  {"key":"3" , "value":"item3"},
                  {"key":"4" , "value":"item4"},
                  {"key":"5" , "value":"item5"},
                  {"key":"6" , "value":"item6"}];

var combo = $("<select>").attr("id", "inputAuto").attr("name", "selectTag");

$.each(optionList, function (j, el1) {
                var opt = $("<option>").attr("value",el1.key).append(el1.value);
                combo.append(opt);
         });

$("#DivId").append(combo);
}

在此我静态定义了选项数组（例如 optionList）。但是您可以为此进行 ajax 调用。

Answer 3

在页面交付之前，struts 标签只被服务器解释一次。如果您之后使用 JavaScript 操作 dom，您将无法使用 JSP 标签。