1

我正在使用 JQuery 在我的 DIV 元素中插入 HTML 我的 JSP 页面中有以下代码

<div id="definitionsDiv">
    <s:select id="typeDropdown" list="types" listKey="id" listValue="value" value="3" onchange="getWordList()"/>        
</div>

HTML看起来像

<div id="definitionsDiv">
  <select id="typeDropdown" onchange="getWordList()" name="">
    <option value="1">Adverb</option>
    <option value="2">Adjective</option>
    <option selected="selected" value="3">Noun</option>
    <option value="4">Other</option>
  </select>
</div>

这可以正常工作并显示一个下拉列表，其中包含从我的 Struts 操作中的“类型”字段检索到的值。但是，我想动态生成这个 HTML，所以我在我的文档加载方法中调用了以下内容......

function buildDefinitionsHTML()
{
    $("#definitionsDiv").empty();
    $("#definitionsDiv").append('<s:select id="typeDropdown" list="types" listKey="id"     listValue="value" value="1" onchange="getWordList()"/>');
}

现在我生成的 HTML 看起来像

<div id="definitionsDiv">
  <s:select id="typeDropdown" onchange="getWordList()" value="1" listvalue="value"     listkey="id" list="types"></s:select>
</div>

当我将静态 HTML 留在我的页面中时，似乎没有回叫我填充选项列表的操作。任何想法如何让它发挥作用？

4

1 回答 1

1

客户端 JavaScript 不可能将服务器端代码添加到页面。您需要做的是在服务器端创建两个 HTML 块并隐藏其中一个。

JSP 不是我的领域，但这可能有效。JSP/HTML：

<div id="definitionsDiv">
    <s:select id="typeDropdown" list="types" listKey="id" listValue="value" value="3" onchange="getWordList()"/>        
</div>
<div id="definitionsDiv2" style="display:none">
  <s:select id="typeDropdown" onchange="getWordList()" value="1" listvalue="value"     listkey="id" list="types"></s:select>
</div>

jQuery：

function buildDefinitionsHTML() {
    $("#definitionsDiv").empty().append($('#definitionsDiv2').children()); 
}

以.append()这种方式使用会将现有的 DOM 元素从隐藏的 DIV 移动到所需的目标 DIV。

但是，使用display:none只隐藏页面中的第二个 DIV；它不会删除它。因此，您可能希望移出definitionsDiv2您的<form>标签，以免它与definitionsDiv.

于 2012-09-17T15:47:36.690 回答