Select2 установить выбранное значение в HTML

Question

Есть ли способ, который я могу установить выбранный id/text в select2 в HTML так же, как отображается и выбран?

Я использую JQuery Выбор2 версии 4.0.0

это код:

$("#users").select2({ 
    placeholder: "select user...", 
    escapeMarkup: function (markup) { return markup; }, 
    ajax: { 
     url: "users.json", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       q: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function (response, page) { 
      return { 
       results: response.data 
      }; 
     }, 
     cache: true 
    }, 
    templateResult: function(item){ 
     if (item.loading) { 
      return item.text; 
     } 
     return item.username + " <small><i>(" + item.role + ")</i></small> "; // display data in html 
    }, 
    templateSelection: function(item){ 
     if (item.username){ 
      return item.username + " <small><i>(" + item.role + ")</i></small> "; // select row in html 
     } 
     return item.text; // for placeholder 
    } 
}); 

Для установки выбранного значения я:

// bring data for to set selected value, data contains fields data 
var selected_user_id = data.id, 

// this is the content that I need to use as it is HTML content 
selected_user_text_html = data.username + " <small><i>(" + data.role + ")</i></small> ", 

// this is the one that I am using and is not html because there is no way to put html inside a option select item 
selected_user_text_regular = data.username + " (" + data.role + ") "; 

// set selected value 
$("#users").append("<option value='"+selected_user_id+"' selected='selected'>"+selected_user_text_regular+"</option>"); 

// trigger update 
$("#users").trigger("change"); 

Есть ли способ я могу установить выделенный текст в HTML вместо обычного текста?

Answer 1

Да, вы можете. Select2 имеет две полезные опции: «templateSelection» и «templateResult« Оба являются функциями, и вы можете создать любую html-оболочку, которую вы хотите. Просто передать параметры метода ВЫБ.2() с чем-то вроде этого ..

var data = [{id: 100, text: "AAAAAA"}, {id: 200, text: "BBBB"}] 

var formatState = function(result) {return $("<b>"+result.text+"</b>")} 
var formatSelection = function(selection){return $("<b>"+selection.text+"</b>") } 

$(".js-example-basic-single").select2({ data:data,templateResult: formatState, templateSelection: formatSelection 
    }).val(100).change(); 

И вы должны увидеть вариант с идентификатором: 100 выбран.

Надеюсь, я помог вам;

Answer 2

, если я вас правильно понимаю,

Согласно апи https://select2.github.io/examples.html , вы можете установить выбранный, поместив его в HTML-разметки, а затем вызов JavaScript

var data = [ 
    { id: 0, text: 'enhancement' }, 
    { id: 1, text: 'bug' }, 
    { id: 2, text: 'duplicate' }, 
    { id: 3, text: 'invalid' }, 
    { id: 4, text: 'wontfix' } 
] 

$(".example").select2({ 
    data: data 
}) 

<select class="example"> 
    <option value="3" selected="selected">invalid</option> 
</select> 

Update

Предполагая, что ajax называется декларацией

, вы не сможете добавить параметр, когда возвращается ajax.

ajax: { 
... 
    processResults: function (response, page) { 

      //something like 
      $.each(response.data, function(i, obj) { 
       if(obj.selected) 
       { 
        var elem = $('#users') 
        elem.append($('<option>', { 
         value: obj.value, 
         text : obj.text, 
         selected : "selected" 
        })); 
       } 
      }) 


     return { 
      results: response.data 
     }; 
    }, 
    cache: true 
}, 

Также обновить

рассмотреть следующие для замены другого кода или дать вам идеи

<style> 
    .optionrole{ 
     font-size: small; 
     font-style: italic 
    } 
</style> 

var sUserId = data.id, 
var sUserText = data.username 
         + "<span class="optionrole"> (" 
         + data.role 
         + ")</span> "; 

// set selected value 
var elem = $('#users') 
elem.append($('<option>', { 
    value: sUserId, 
    text : sUserText, 
    selected : "selected" 
})); 

// trigger update 
elem.trigger("change");