How to get Selected Text from select2 when using input

Question

I am using the select2 control  loading data via ajax  This requires the use of the  lt input type hidden   gt  tag   Now  I want to retrieve the selected text   The value property in the data-bind expression sotres the id only   I have tried     select2-chosen   text    but this breaks when I have multiple select2 controls on the page

User · Answer

In Select2 version 4 each option has the same properties of the objects in the list;

if you have the object

Obj = {
  name: "Alberas",
  description: "developer",
  birthDate: "01/01/1990"
}

then you retrieve the selected data

var data = $('#id-selected-input').select2('data');
console.log(data[0].name);
console.log(data[0].description);
console.log(data[0].birthDate);

User · Answer

I finally figured it out doing this   var  your-original-element       your-original-element    var data    your-original-element select2  data   0   text    alert data     if you also want the value   var value    your-original-element select2  data   0   id    alert value

User · Answer

The code below also solves otherwise   on  change   function e       var lastValue   e currentTarget value    var lastText   e currentTarget textContent

User · Answer

Again I suggest Simple and Easy  Its Working Perfect with ajax when user search and select it saves the selected information via ajax       vendor-brands   select2      ajax       url site url  general get brand ajax json      dataType   json     delay  250    data  function  params      return       q  params term     search term     page  params page         processResults  function  data  params         parse the results into the format expected by Select2      since we are using custom formatting functions we do not need to      alter the remote JSON data  except to indicate that infinite      scrolling can be used   params page   params page    1     return       results  data      pagination          more   params page   30   lt  data total count               cache  true    escapeMarkup  function  markup    return markup        let our custom    formatter work minimumInputLength  1     on  change   function e        var lastValue       vendor-brands option last-child   val      var lastText       vendor-brands option last-child   text       alert lastValue     lastText

User · Answer

The correct way to do this as of v4 is       select2-chosen   select2  data   0  text  It is undocumented so could break in the future without warning   You will probably want to check if there is a selection first however   var s       select2-chosen     if s select2  data    amp  amp    s select2  data   0          do work

User · Answer

As of Select2 4 x  it always returns an array  even for non-multi select lists   var data      your-original-element   select2  data   alert data 0  text   alert data 0  id     For Select2 3 x and lower  Single select   var data      your-original-element   select2  data    if data      alert data text       Note that when there is no selection  the variable  data  will be null   Multi select   var data      your-original-element   select2  data   alert data 0  text   alert data 0  id   alert data 1  text   alert data 1  id     From the 3 x docs      data Gets or sets the selection  Analogous to val method  but works   with objects instead of ids       data method invoked on a single-select with an unset value will return   null  while a data method invoked on an empty multi-select will return

User · Answer

Used this for show text  var data       id-selected-input   select2  data     data forEach function  item         alert item text

User · Answer

Also you can have the selected value using following code      alert  Selected option value is        SelectelementId   select2  val

User · Answer

This one is working fine using  V 4 0 3  var vv       mySelect2         var label     vv  children  option value      vv  select2  val         first   html    console log label

[javascript] How to get Selected Text from select2 when using <input>

Examples related to javascript

Examples related to jquery

Examples related to knockout-2.0

Examples related to jquery-select2

Examples related to ui-select2