How to set jquery select2 selector with the selected text instead of the selected id ?

[jc.da...@gmail.com]

Dear all,

I use Select2 with Ajax into a Struts2 WebApp. It works well but it always set the search Struts2 variable with the selected id. And I cannot figure out how to set the Struts2 variable with the text.

JSP:

<td><s:hidden id="query0" name="termQueryList[0].query" style="width:300px" /></td>

JavaScript:

<script type="text/javascript">
$().ready(function() {
$("#query0").select2({
minimumInputLength: 2,
allowClear: true,
multiple: true,

ajax: {
url: "services/json/doSuggest.action",
dataType: 'json',
data: function (term, page) {
return {
q: term,
searchableTag: $('#query0SearchTag').val()

};
},
params: { // extra parameters that will be passed to ajax
contentType: 'application/json; charset=utf-8'
},
results: function (data, page) {
return { results: data };
}
}

}).on("select2-selecting", function(e) {
alert("selecting val=" + e.val + " choice=" + e.object.text);
})

;

});

Data is formatted as follow:
[
{ id:"0", text:"text 0" },
{ id:"1", text:"text 1" },
{ id:"2", text:"text 2" },
.....................
{ id:"n", text:"text n" }
]

When selecting an item from the Select2 popup list, the variable termQueryList[0].query is set to the corresponding id (i.e. 2 if "text 2" was selected.
I would like to set variable termQueryList[0].query to "text 2" when "text 2" is selected.
Thank you in advance for yr attention and any advice on these issue.

Best wishes,

Jean-Claude Dauphin

[Jean-Claude Dauphin]

For thus that could be interested by the solution, I finally find out how to get back the text instead of the id.

https://github.com/ivaynberg/select2/issues/852#issuecomment-13478644

<script type="text/javascript">
          
            $().ready(function() {
               
                  function format(data){
                         return data.text;
                  };

                   $("#query0").select2({
                      minimumInputLength: 2,           
                      allowClear: true,
                      multiple: true,

                      formatResult: format,
                      formatSelection: format,
                      // Function to submit the value (text:) from the selection
                      //  instead of the selected object's ID
                      id: function(object) {
                         return object.text;
                      },
                                     
                      ajax: {
                                               ............................................

Best wishes,

Jean-Claude Dauphin

[Ali Shan Backlinks]

This is a classic Select2 + Struts2 integration question. By default Select2 binds the id to the underlying input, so mapping the displayed text instead requires custom handling (like overriding id or updating the hidden field on select events). Threads like this are very helpful for developers facing similar binding challenges emoji codes.