1

经过相当多的时间尝试。我决定发布一个问题。这是我想做的：

  • 在表单中添加和删除下拉菜单。
  • 从表单中删除选定的下拉列表。这意味着如果用户已经做出了一些选择，则应该可以删除例如选择了“选项 2”的下拉菜单。

到目前为止，根据 Gregg 对此 [问题] 的回答（在按钮单击上从 Grails 模板添加表行），我有一个向表单添加下拉列表的表单。

但是因为我没有那么好......我刚刚添加的表格带有一段时间标签。

这是表格：

<div class="container-fluid">
<div class="row-fluid">
        <div class="span3" id="resources">
            <div class="control-group box" id="control-group">
                <div class="controls" id="resource-grouper">
                    <g:render template="resource" model="[end:1]"/>
                </div>
            </div>
        </div>
    </div>
</div>

呈现的模板：每个下拉菜单都有一个按钮，用于在表单中添加或删除自身。

<%int i = 1 %>
<g:while test="${i <= end}">
<%i++%>
<div class="input-prepend">
<span class="add-on">
    <button class="btn btn-mini addResource" type="button" onclick="addResource();" >
        <i class="icon-plus-sign"></i>
    </button>
</span> <span class="add-on">
    <button class="btn btn-mini" type="button">
        <i class="icon-minus-sign"></i>
    </button>
</span>
<g:select name="resources" from="${org.pmo.sari.Resource.list()}" optionKey="id" size="1" value="${projectInstance?.resources*.id}" class="span10" />
</div>
</g:while>

javascript（到目前为止仅用于添加）：

function addResource(){

    var end = document.getElementById('end').value;

    $.get("/SARI/project/addResource", {end: end} ,function(html) {

        $('#control-group').append(html);
    });
}

控制器功能

def addResource(){
    int max = params.end.toInteger()
    max = max + 1
    render(template: "resource", model: ['end': max])
}

如果有人对此主题有解决方案或评论，那将非常有帮助。

4

1 回答 1

0

过了一段时间......我在 JQuery 的帮助下完成了它。我发布代码以防万一它对任何人有用......它运作良好......虽然我认为我不应该像我这样做的那样使用按钮的ID。欢迎提出建议。

       $('button.resources').on('click',function(){
            var clickedButton = $(this),
                    resourceContainer = clickedButton.parent('div'),
                    selectCounter = $('select.resources').size();

            if(clickedButton.attr('id')=='add'){

                var selector = clickedButton.siblings('select'),
                        newSelectContainer = resourceContainer.clone(true);

                newSelectContainer.find('select').val(selector.val());
                resourceContainer.after(newSelectContainer);
                selectCounter = selectCounter + 1;

                if(selectCounter > 1){
                    $('button.resources#remove').removeAttr('disabled');
                }
            }

            if(clickedButton.attr('id')=='remove'){
                if (selectCounter > 1){
                    resourceContainer.remove();
                    selectCounter = selectCounter - 1;
                    if(selectCounter == 1){
                        $('button.resources#remove').attr('disabled','disabled');
                    }

                }
            }
        });

被克隆和附加的片段：

<div class="fieldcontain" id="resources-container">
<label for="resources">
    <g:message code="project.resources.label" default="Resources" />
</label>
<button type="button" class="resources" id="add" >+</button>
<button type="button" class="resources" id="remove">-</button>
<g:select name="resources" class="resources" from="${someclass.list()}" optionKey="id" size="1" value="${someInstance?.resources*.id}"  />
</div>

结果允许在单击后添加下拉框，并保留所选值。

于 2013-04-04T00:48:36.993 回答