个人中心
gpt4 book ai didi

javascript - Select2 4.0.3 无法使用 ajax 调用填充其他 select2 字段

转载 作者：行者123 更新时间：2023-12-03 06:03:16 27 4
gpt4 key购买 nike

我在使用 Select2 时遇到一些问题，基本上我需要使用从 Select2 Ajax 搜索检索到的数据来填充其他一些表单字段。

甚至在这里找到以下示例:

Select2 4.0 - Push new entry after creation

我无法使用从 Select2 找到的结果以编程方式填充某些字段

举个例子，假设我有三个字段，我可以使用其中两个字段来搜索数据，并且我希望在选择 ajax 调用返回值之一后自动填充其他剩余字段。

所以，举个例子:

 Test field 01 (Select2 field)
 Test field 02 (Select2 field)
 Test field 03 (standard input field)

如果我在“测试字段 01”上搜索某些内容，我希望 02 和 03 将自动填充。

我已经实现了一种解决方案，您可以在下面找到该解决方案，但它不适用于 Select2 字段，只能适用于输入字段。

如果我使用代码检查器，我会看到“select”元素内的新选项已正确创建并标记为“selected”，但似乎“select2-selection__rendered”span 元素在触发后未正确更新“改变”事件

在我的测试过程中，我还注意到，每次我从结果中选择一个值时，我用来更新数据的函数“updateselect2”就会被调用四次，因此我在结果中发现了 4 次相同的值。目的地选择框。

看看下面的动画 gif 以了解完整的行为

problem example

我做错了什么吗？

我的设置是:

  • jquery-3.1.0
  • 选择2 4.0.3

下面您可以找到我当前工作的完整示例:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>Test</title>
    <script src="jquery-3.1.0.min.js"></script>
    <link rel="stylesheet" href="select2.min.css"/>    
    <script src="select2.full.js"></script>


</head>
<body>
<div class="section ">
  <div class="container ">
    <div class="row">
        <div class="col-md-2">
          <div class="form-group">
            <label for="testField01" class="control-label">Test field 01</label>
            <select id="testField01" class="form-control" name="testField01" style="width:150px;">
              <option value=""></option>
            </select>
          </div>
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <label for="testField02" class="control-label" >Test field 02</label>
            <select id="testField02" class="form-control" name="testField02" style="width:150px;">
              <option value=""></option>
            </select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label for="testField03" class="control-label" style="width:150px;">Test field 03</label>
            <input id="testField03" class="form-control" value="" readonly="readonly" />
          </div>
        </div>
    </div>
  </div>
</div>

</body>

</html>

JavaScript:

var select2_query = {};

function markMatch(text, term) {
    // Find where the match is
    var match = text.toUpperCase().indexOf(term.toUpperCase());

    var $result = $('<span></span>');

    // If there is no match, move on
    if (match < 0) {
        return $result.text(text);
    }

    // Put in whatever text is before the match
    $result.text(text.substring(0, match));

    // Mark the match
    var $match = $('<span style="color:red"></span>');
    $match.text(text.substring(match, match + term.length));

    // Append the matching text
    $result.append($match);

    // Put in whatever is after the match
    $result.append(text.substring(match + term.length));

    return $result;
}

function updateselect2(elId, values) {

  var $element = $('#' + elId); // the element that Select2 is initialized on
  if ($element.attr('id') == undefined) {
    return false;
  }
  $element.empty();
  var $option = $("<option selected></option>"); // the new base option
  $option.val(values[elId]); // set the id
  $option.text(values[elId]); // set the text
  $element.append($option); // add it to the list of selections
  $element.trigger("change"); // tell Select2 to update
}


function formatResult(result) {
  if (result.loading) {
    return result.text;
  }
  var term = select2_query.term || '';
  var $formattedResult = markMatch(result.testField01 + ' - ' + result.testField03, term);

  return $formattedResult;
}

function formatSelection(selection) {
  if (!selection.selected) {
    updateselect2('testField02', selection);
    $('#testField03').val(selection.testField03);
  }
  return selection.testField01;
}


function initSearch(fieldId, searchType) {
    $("#" + fieldId).select2({
        ajax: {
            url: "/search/data",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    id: params.term, // search term
                    by: searchType,
                    page: params.page
                };
            },
            processResults: function (data, params) {
             params.page = params.page || 1;
                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) {
            return markup;
        },
        minimumInputLength: 4,
        templateResult: formatResult,
        templateSelection: formatSelection,
        language: {
            searching: function (params) {
                select2_query = params;
                return 'Searching…';
            }
        }
    });
}

$(document).ready(function() {

  $('testField01').select2();
  $('testField02').select2();

  initSearch('testField01', 'testField01');
  initSearch('testField02', 'testField02');

});

JSON 数据示例:

{"total_count":1,"incomplete_results":false,"items":[{"id":1,"testField01":"123456789","testField01":"987654321", "testField03":"ABCDEFGHIJK"}]}

最佳答案

好吧，当您将选项附加到选择字段时，您需要重新初始化 select2 元素，例如:

$element.select2("销毁");

而不是 updateselect2() 函数中的 $element.trigger("change");。

此外，更改 select2 中的值的正确方法不是触发 change 监听器，而是调用 .select2('val', thevalue)由于新选项，您的案例将不起作用，但请记住这一点。

另一个注意事项:无需在 document.ready 中初始化 select2，因为 initSearch 会为您完成此操作。

最后说明:您的示例 json 是错误的，您传递了 testField01 两次

关于javascript - Select2 4.0.3 无法使用 ajax 调用填充其他 select2 字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39663213/

27 4 0
文章推荐： javascript - parse还活着，但是如何通过 'index'查询
文章推荐： javascript - 如何在node.js服务器中实现-toDataURL()函数？
文章推荐： javascript - Dijit/form/Select inside Dijit/TitlePane 自定义小部件的一部分在错误的位置打开下拉菜单
文章推荐： javascript - 对方法或属性访问的意外调用。微软客户关系管理
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com