Question

我在Liferay中使用这样的形式做一个portlet：

<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
    <aui:select  name="attribute" style="float: left;">
        <c:forEach var="attr" items="${fields}">
            <aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
        </c:forEach>                                
    </aui:select>
    <aui:input type='button' value="Add Condition"  name='addCondition' onClick="addCondition();" %>'></aui:input>
    <div id='conditions'></div>
</form>

我希望当有人点击按钮时添加一个新的选择，但我不知道怎么做新的。我尝试用JavaScript执行：

var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');

和

document.createElement('<aui:select>');

我也尝试过AUI脚本：

var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');

但它不起作用，因为是html并且不能制作AUI，如果我使用HTML正常进行新选择，当我捕获值时会丢失一些。

感谢。

Answer 1

正如@Baxtheman所说，这不起作用，因为标签不是客户端HTML标签，而是来自aui-taglib的服务器端标签。

要动态加载选择框的内容，您需要执行以下步骤：

在JSP中添加一个元素，但将其隐藏

<aui:select id="conditions" style="display: none;"><aui:select>
从您的javascript中，当您想要用来加载第二个选择框的事件发生时，您可以选择下拉框并添加您希望的选项，例如此帖子中的答案{{ 3}}
确保在加载选项后将选择框设置为可见。

document.getElementById('<portlet:namespace/>conditions').style.display = 'block';

为了更清楚，如果您添加普通的HTML选择框，那么您缺少关于POST的信息的原因是因为aui：form序列化数据的方式。我相信最终会有一个自定义onSubmit，只收集aui元素。

Answer 2

＆lt; aui：select＆gt; 是JSP taglib，而不是最终的HTML标记。

如果您理解这一点，请解决。

动态形成AUI Liferay

2 个答案: