Question

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

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

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

但是因为我没有那么好......我刚刚添加了一些行格式。

以下是表格：

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

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

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>

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

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

1 个答案:

添加和删​​除输入下拉列表到grails表单

1 个答案:

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