使用JavaScript / JQuery動態添加Struts 2選擇下拉列表

Question

我有一個student.jsp頁面，可從Faculty數據庫中加載選擇下拉列表

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

現在，當我單擊“添加”按鈕時，我必須添加更多完全相同的下拉列表。 為此，我有一個帶有Add按鈕的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克隆方法 。

<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標簽。