jquery - 将输入下拉列表添加和删除到grails表单

Question

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

从表单中添加和删除下拉列表。

从表单中删除所选的下拉列表。这意味着，如果用户已经进行了一些选择，则应该可以删除例如仅选中“选项2”的下拉菜单。

到目前为止，基于Gregg对这个[question](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);
    });
}

Controller 功能

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

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

Answer 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>

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