向 grails 表单添加和删除输入下拉列表答案

【问题标题】：Add and remove input dropdowns to a grails form向 grails 表单添加和删除输入下拉列表
【发布时间】：2013-03-16 06:21:42
【问题描述】：

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

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

到目前为止，根据 Gregg 对此 [问题] (Adding table rows from a Grails Template on Button Click) 的回答，我有一个向表单添加下拉列表的表单。

但是因为我没有那么好......我刚刚添加的表单带有一个while标签。

这是表格：

<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])
}

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

【问题讨论】：

那么，目前的结果是什么？它与您的要求有何不同？
你好尤金。目前可以在按钮单击时添加额外的 _resource。我想要的是可以添加或删除“实例”之一（以某种方式调用它们），例如，如果用户单击具有“option2”选择的保管箱的按钮，它应该删除那个特定的下拉菜单。我打算添加一张图片，但仍然没有足够的积分。

标签： jquery grails controller append gsp

【解决方案1】：

过了好一阵子……我在 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>

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

【讨论】：