我有一个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标签。
答案 0 :(得分:4)
<s:select>
是一个struts标记,不能直接从javascript添加,并假设运行服务器端。
单击“添加”按钮时,您可以使用jQuery Clone method。
<s:select list="ftyList" name="fid" listKey="fid" listValue="name" cssClass="fidSelect" label="Select a Faculty" />
function addListFunction() {
$('.fidSelect').clone().insertAfter(".fidSelect");
}
答案 1 :(得分:1)
您可以使用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);
}
在此我已经静态定义了选项数组(i.n.选项列表)。但你可以为此做一个ajax调用。
答案 2 :(得分:0)
struts标记仅在页面传递之前由服务器解释一次。如果您之后使用JavaScript操作dom,则无法使用JSP标记。