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

我对Select2存在一些问题，基本上我需要使用从Select2 Ajax搜索中检索到的数据填充其他一些表单字段。Select2 4.0.3无法使用ajax调用填充其他select2字段

即使下面的例子在这里找到：

Select2 4.0 - Push new entry after creation

我不能用结果从创立选择二

编程填补某些领域正如例如，考虑到我已经三场，我可以使用这些字段中的两个来搜索数据，并且我希望在选择ajax调用返回值之后自动填充其他字段。

所以，例如：

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

如果我对“测试场01”搜索我想要的东西是02和03会自动填写。

我已经实现了一个解决方案，您可以在下面找到，但不能与Select2字段一起使用，只能使用输入字段。

如果我使用代码检查器，我发现“选择”元素中的新选项已正确创建并标记为“已选中”，但看起来“select2-selection__rendered”span元素在触发后未正确更新“改变”事件

在我的测试中，我也注意到函数“updateselect2”，我用它来更新数据被称为每次我从结果中选择一个值和必然，我发现4时的四倍目的地选择框中的值相同。

看看下面的gif动画看到完整的行为

有一些事情是我做错了什么？

我的设置是：

jQuery的3.1.0
选择二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"}]}

来源

2016-09-23 Marco

那么，当你添加选项的选择字段，你需要重新初始化选择2元，如：

$element.select2("destroy");

，而不是$element.trigger("change");在updateselect2()功能。

此外，更改select2中值的正确方法不是触发change侦听器，而是调用.select2('val', thevalue)，在您的情况下，由于新选项而无法工作，但请记住这一点。

另一个注意事项：不需要初始化document.ready中的select2，因为initSearch会为您执行此操作。

最后要注意：你的样品JSON是错的，你传递testField01两次

来源

2016-09-25 18:08:40

'.select2（ 'VAL'，thevalue）'被弃用选择2 4.0.x的，用'.VAL（thevalue）代替' –

良好的平视，没有注意到，因为我个人仍然与3.5。 –

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

回答

相关问题