1

选择2/3.5.2/

我重新发布这个是因为我最初的帖子格式不正确。

正在使用以下项目：

  1. 可以在 select2 表单字段中搜索多条记录
  2. 如果在 select2 表单中找不到新记录，则引导弹出模式具有输入新记录的表单。
  3. AjaxForm 用于将新记录从模态表单传递到 select2 表单

问题：

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

我是 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 -->
4

1 回答 1

0

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

  1. 如果添加第二条记录，它将替换传递给 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);
  1. 模态不会清除表单值。

这是意料之中的，因为您只"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
    ...
}

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

于 2015-11-10T13:08:02.967 回答