4

我正在 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 正常进行新选择，当我捕捉到一些值时，一些值会丢失。

谢谢。

4

2 回答 2

2

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

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

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

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

  2. 从您的 javascript 中，当您要用于加载第二个选择框的事件发生时，您将选择下拉框并添加您希望添加的选项，如本文中的答案 Add options to select with javascript

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

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

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

于 2013-10-02T16:09:50.273 回答
1

<aui:select>是一个 JSP 标记库，而不是最终的 HTML 标记。

如果你明白这一点，你就解决了。

于 2013-10-02T13:31:20.210 回答