Question

SELECT2 / 3.5.2 /

我正在重新发布此内容，因为我的初始帖子无法正确格式化。

正在使用以下项目：

可以在select2表单字段中搜索多个记录
如果在select2表单中找不到，则bootstrap popup模式有一个表单可以输入新记录。
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>

联系Modal

<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

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

如果添加了第二条记录，它将替换传递给select2字段的第一条记录，而不是附加它。

问题在于您的代码的这一部分：

text=

它的作用是重置选择，而不是附加新项目。 “附加”功能可以通过以下方式实现：

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

模态不会清除表单值。

这是预期的，因为你只需要// 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);模态，而不需要操纵它的底层DOM内容。这可以通过将"hide"函数调整为：

来解决

processJson

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

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

1 个答案: