Select2はHTMLで選択した値を設定します

Question

HTMLでselect2に選択されたID /テキストをHTMLで表示および選択できるように設定する方法はありますか？

$("#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 
    } 
}); 

私が選択した値に設定するには：：私はjqueryのSELECT2バージョン4.0.0

これはコードで使用しています

// 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には2つの便利なオプション「templateSelection」と「templateResult」があります。どちらも関数であり、必要なhtmlラッパーを作成することができます。 ただ

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(); 

...このような何かとSELECT2（）メソッドにオプションを渡すそして、あなたはidを持つオプションが表示されるはずです。100が選択されています。

私はあなたを助けたと思います。

Answer 2

私が正しくあなたを理解していれば、

API 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> 

を呼び出して設定することができます

宣言で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");