如何通过 ajaxform 添加多条记录到 select2 表单？

Question

select2/3.5.2/

我正在重新post，因为我的初始 post 格式不正确。

正在使用以下项目：

可以在 select2 表单域中搜索多条记录
如果在 select2 表单中找不到新记录，bootstrap 弹出模式有一个表单可以输入新记录。
AjaxForm 用于将新记录从模态表单传递到 select2 表单

问题：

如果添加第二条记录，它会替换传递给 select2 字段的第一条记录，而不是追加它。
当select2表单被提交处理时，它会传递select2中选择但不是从ajaxform（模态）添加的记录。
模态不清除表单值。

我是 js 新手，jquery，如有任何帮助，我们将不胜感激。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>

        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

        <script>
            $(document).ready(function() { 
                //select2
                $("#contact_search").select2({
                    width: '100%',
                    allowClear: true,
                    minimumInputLength: 3
                });

                // ajaxform
                $('#contactform').ajaxForm({
                    dataType: 'json',
                    success: processJson
                });

                function processJson(data) { 
                    //close the modal
                    $('#contactmodal').modal('hide');
                    // set the returned data to a variable
                    var newcontactid = data.DATA;
                    //output data to console
                    console.log(data);

                    var firstname = $('#fname').val();
                    var lastname = $('#lname').val();
                    var name = firstname + ' ' + lastname;
                    $("#contact_search").select2("data", [{id: data.DATA, text: name}]);
                };
            }); 
        </script>

表格：

<div class="row indent">
    <div class="col-md-5">
        <form name="searchform" action="ajaxform_action.cfm" method="post">
            <label>Search for People</label>

            <select id="contact_search" multiple size="50" name="people">
            <cfoutput query="people">
                <option value="#people.contactid#" >#firstname# #lastname#</option>
            </cfoutput>
            </select> 

            <input type="submit" value="Save" name="submit" class="btn btn-primary btn-xs" />
        </form>

        <!---Add New Person--->
        <a href="#newAuthorModal" data-toggle="modal" title="New Profile" data-field="contactform" data-target="#contactmodal">
            <img src="img/user_add.png" alt="Add New Person" title="Add New Person" border="0">
        </a>
    </div>
</div>

联系模式

<div class="modal fade" id="contactmodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
            </div>
            <div class="modal-body">
                <!---Form--->
                <form id="contactform" action="cfc/insert.cfc?method=insertcontact" method="post" name="testform">
                    First Name: <input type="text" name="firstname" id="fname" /> 
                    Last Name: <input type="text" name="lastname" id="lname" />
                    <input id="btnSave" type="submit" value="Submit" /> 
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

让我们一个一个地尝试解决问题。

If a second record is added, it replaces the first record passed to the select2 field rather than appending it.

问题出在您的这部分代码中：

$("#contact_search").select2("data", [{id: data.DATA, text: name}]);

它所做的是重置选择，而不是附加新项目。 "append" 功能可以这样实现：

// get current selection
var selection = $("#contact_search").select2("data");
// add a new item to the selection
selection.push({id: data.DATA, text: name});
// set the updated selection
$("#contact_search").select2("data", selection);

The modal does not clear the form values.

这是意料之中的，因为您只 "hide" 模态，而没有操纵其基础 DOM 内容。这可以通过将 processJson 函数调整为：

来解决

function processJson(data) { 
    //close the modal
    $('#contactmodal').modal('hide');
    // set the returned data to a variable
    var newcontactid = data.DATA;
    //output data to console
    console.log(data);

    var firstname = $('#fname').val();
    var lastname = $('#lname').val();

    // Clear the input values!
    $('#contactmodal input[type=text]').val("");

    // the rest of the function
    ...
}

这是这些解决方案的工作示例inside a JSFiddle

如何通过 ajaxform 添加多条记录到 select2 表单？

How to I add multiple records through ajaxform to a select2 form?

javascript

jquery

ajaxform

jquery-select2

jquery-select2-3