Javascript 如何通过ajaxform将多条记录添加到select2表单？_Javascript_Jquery_Jquery Select2_Ajaxform_Jquery Select2 3

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

javascript jquery

Javascript 如何通过ajaxform将多条记录添加到select2表单？,javascript,jquery,jquery-select2,ajaxform,jquery-select2-3,Javascript,Jquery,Jquery Select2,Ajaxform,Jquery Select2 3,选择2/3.5.2/ 我重新发布这篇文章是因为我的第一篇文章格式不正确正在使用以下项目：可以在select2表单字段中搜索多条记录如果在select2表单中找不到新记录，引导弹出模式有一个表单可以输入新记录 AjaxForm用于将新记录从模式表单传递到select2表单问题：如果添加了第二条记录，它将替换传递到select2字段的第一条记录，而不是追加该记录提交select2表单进行处理时，它将传递在select2中选择但未从ajaxform（模式）中添加的记录模态没有清除表单值

选择2/3.5.2/

我重新发布这篇文章是因为我的第一篇文章格式不正确

正在使用以下项目：

可以在select2表单字段中搜索多条记录

如果在select2表单中找不到新记录，引导弹出模式有一个表单可以输入新记录

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>


$（文档）.ready（函数（）{
//选择2
$（“#联系人搜索”）。选择2({
宽度：“100%”，
allowClear:是的，
最小输入长度：3
});
//ajaxform
$（'#contactform'）.ajaxForm({
数据类型：“json”，
成功：processJson
});
函数processJson（数据）{
//关闭模式
$（'#contactmodel'）.model（'hide'）；
//将返回的数据设置为变量
var newcontactid=data.data；
//将数据输出到控制台
控制台日志（数据）；
var firstname=$（'#fname'）.val（）；
var lastname=$（'#lname'）.val（）；
var name=firstname+“”+lastname；
$（“#联系方式搜索”）。选择2（“数据”，[{id:data.data，text:name}]）；
};
});

表格：


寻人
#姓#

接触模态

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


&时代；接近
名字：
姓氏：

让我们试着逐一解决问题

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

问题出在代码的这一部分：

$("#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内容。通过将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
    ...
}

下面是这些解决方案的工作示例
让我们尝试一个接一个地解决问题
如果添加了第二条记录，它将替换传递到select2字段的第一条记录，而不是追加该记录
问题出在代码的这一部分：
$("#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内容。通过将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
    ...
}

这是这些解决方案的一个工作示例
请显示您的HTML好吗？我添加了它。谢谢你和我一起看。我这里有一个有效的解决方案：你能显示你的HTML吗？我添加了它。谢谢你和我一起看。我这里有一个有效的解决方案：谢谢！我不知道当有人发表评论时如何获得电子邮件提醒。我能够让这个代码工作。我不熟悉“推送”。我算出了$（'#contactform'）[0]。reset（）；清除输入值。我也很高兴有你的方法。我感谢你的帮助和时间！我这里有一个有效的解决方案：谢谢！我不知道当有人发表评论时如何获得电子邮件提醒。我能够让这个代码工作。我不熟悉“推送”。我算出了$（'#contactform'）[0]。reset（）；清除输入值。我也很高兴有你的方法。我感谢你的帮助和时间！我这里有一个可行的解决方案：