javascript - 动态表单 AUI Liferay

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 的服务器端标记。

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

1. 在您的 JSP 中添加一个元素，但将其隐藏

   <aui:select id="conditions" style="display: none;"><aui:select>

2. 在您的 javascript 中，当您想用来加载第二个选择框的事件发生时，您可以选择下拉框并向其中添加您想要的选项，例如这篇文章 Adding options to select with javascript < 中的答案/p>

3. 确保在加载选项后将选择框设置为可见。

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

为了更清楚起见，如果您添加一个普通的 HTML 选择框，您在 POST 上丢失信息的原因是 aui:form 序列化数据的方式。我相信最终会得到一个只收集 au 元素的自定义 onSubmit。