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

回答

相關問題