Question

我正在使用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操作中的“types”字段中检索到的值。但是，我想动态生成这个HTML，所以我在我的doc加载方法中调用以下内容....

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时，似乎没有调用我的操作来填充选项列表。任何想法如何让这个工作？

Answer 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一起无形地提交。

动态生成的HTML不起作用

1 个答案: