Como definir o valor selecionado de jquery select2?

99

Pertencem a códigos anteriores a select2 versão 4

Eu tenho um código simples para select2obter dados do Ajax

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

Este código está funcionando, no entanto, preciso definir um valor nele como se estivesse no modo de edição. Quando o usuário selecionar um valor pela primeira vez, ele será salvo e quando ele precisar editar esse valor deve aparecer no mesmo menu de seleção ( select2) para selecionar o valor selecionado anteriormente, mas não consigo encontrar uma maneira.

ATUALIZAR:

O código HTML:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

O acesso programático Select2 não funciona com isso.

javascript  php  jquery  ajax  jquery-select2 
— Limpar ambos
fonte
Você deve ser capaz de definir apenas o valor selecionado no html ou usar$("#programid").val()
— Explosion Pills
@ExplosionPills Negativo, tentei também e obtive um valor em branco. Como devo usar programid.val ()? Peguei o valor do servidor e preciso defini-lo neste campo oculto de select2.
— ClearBoth
@ClearBoth Não tenho certeza se entendi o que você quis dizer. Você está tentando definir o valor "selecionado" do componente Select2 para um dos resultados recuperados por AJAX?
— Um Phan de
@AnPhan Sim, existe uma maneira de fazer isso?
— ClearBoth
@ClearBoth existe. Verifique minha resposta abaixo.
— Um Phan de

Respostas:

61

Para definir dinamicamente o valor "selecionado" de um componente Select2:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Onde o segundo parâmetro é um objeto com valores esperados.

ATUALIZAR:

Isso funciona, só queria observar que no novo select2, "a_key" é "texto" em um objeto select2 padrão. tão:{id: 100, text: 'Lorem Ipsum'}

Exemplo: 

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

Obrigado a @NoobishPro

— Um Phan
fonte
1
Eu estava tentando com o id apenas select2 ('val', '1'), mas não funcionou .. Obrigado
— ClearBoth
6
Isso funciona, só queria observar que no novo select2, "a_key" é "texto" em um objeto select2 padrão. então: {id: 100, text: 'Lorem Ipsum'}
— NoobishPro
2
mesmo aqui na v4. Tenho puxado meu cabelo para fora com este. Eu não acho que seja possível sem ir para as soluções JavaScript. Procurando por outro menu suspenso jQuery / Bootstrap Select2 agora (2 dias mexendo em todos os métodos concebíveis - sem alegria!)
— MC9000
29
Select2 v4: $('#inputID').val(100).trigger('change') Ver select2.github.io/…
— Paul
@NoobishPro & An Phan - Obrigado pela resposta e comentário
— Sinto
104

SELECT2 <V4

Etapa 1: HTML

<input name="mySelect2" type="hidden" id="mySelect2">

Etapa 2: Crie uma instância de Select2

$("#mySelect2").select2({
      placeholder: "My Select 2",
      multiple: false,
      minimumInputLength: 1,
      ajax: {
          url: "/elements/all",
          dataType: 'json',
          quietMillis: 250,
          data: function(term, page) {
              return {
                  q: term,
              };
          },
          results: function(data, page) {
              return {results: data};
          },
          cache: true
      },
      formatResult: function(element){
          return element.text + ' (' + element.id + ')';
      },
      formatSelection: function(element){
          return element.text + ' (' + element.id + ')';
      },
      escapeMarkup: function(m) {
          return m;
      }
});

Etapa # 3: Defina o valor desejado

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

Se você usar select2 sem AJAX, você pode fazer o seguinte:

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>
/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

Você também pode fazer isso:

$("#mySelect2").select2("val", "0");

SELECT2 V4

Para select2 v4, você pode anexar diretamente uma ou mais opções da seguinte forma:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>                                                                   
</select>

Ou com JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
 
$("#myMultipleSelect2").append($newOption).trigger('change');

outro exemplo

$("#myMultipleSelect2").val(5).trigger('change');
— tomloprod
fonte
3
gatilho ('alterar'); é a parte importante
— mihkov
$ ("# mySelect2"). select2 ("val", "0") - isso irá acionar o evento jquery de mudanças de valor. Como evitar que isso aconteça. Normalmente, quando o usuário envia o formulário, depois de concluído, eu zero todos os dados do formulário. Redefinir não redefinirá select2. Usar select2 ("val", "0") irá acionar mudanças que são loucas, pois nenhuma ação do usuário.
— jumper rbk
— Ryan
Recomendado pelo .trigger ('mudança')
— JP Dolocanog
23

Html:

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JavaScript:

$("#lang").select2().select2('val','asp');

jsfiddle

— Ahmad Tarawneh
fonte
2
como definir por texto em vez de val
— Rizwan Patel
A questão era como fazer isso depois de carregar com a chamada AJAX. Esta resposta não funciona neste caso.
— MC9000
isso irá disparar mudanças no valor select2, o que será estranho se você tiver este evento para processar, e ele disparou sem o usuário fazer isso
— jumper rbk
17

Além disso, como tentei, ao usar ajax em select2, os métodos de controle programático para definir novos valores em select2 não funcionam para mim! Agora escrevo estes códigos para resolver o problema:

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2

Você pode testar o código de amostra completo neste link: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
Neste código de amostra há um select2 ajax e você pode definir um novo valor com um botão.

Exibir trecho de código

— Nabi KAZ
fonte
Estou usando displayKey diferente e outras coisas (embora não fosse uma boa ideia) - isso ajuda perfeitamente em meus testes de aceitação com Codeception
— MonkeyMonkey
2
Tedioso, com certeza, mas, como todo mundo está descobrindo, o Select2 v4 simplesmente não tem como fazer algo tão ridiculamente simples como definir uma seleção padrão
— MC9000
Eu descobri que esta resposta é a única maneira de fazer select2 v4 - ajax select.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');

Experimente este anexo e selecione. Não duplica a opção na chamada AJAX.

— Jigz
fonte
var $ option = $ ("<opção selecionada> </option>") .val ('1'). text ("Escolha-me"); $ ('# select_id'). append ($ option) .trigger ('alterar');
— Jigz
obrigado. trabalhos confirmados na versão 4.0.0 (chamada de ajax)
— khalil
Outro sucesso confirmado na versão 4 com ajax.
— um codificador de
Se você estiver usando uma caixa pesquisável com ajax, esta é a solução certa. Este funcionou para mim, junho de 2019.
— Eric Skiff
12

Eu gostei disso-

$("#drpServices").select2().val("0").trigger("change");
— Ashi
fonte
2
Forneça alguma explicação para ajudar os usuários a entender como seu código funciona e para responder à pergunta do OP.
— Ivan
@Ivan, eu estava fazendo assim $ ("# drpServices"). Val ("0"); que não selecionará o imposto na lista suspensa select2, para afetar o valor e o texto, precisamos acionar a função de mudança de select2. Isso está funcionando perfeitamente para mim. Espero que os usuários entendam.
— Ashi
9

Na versão atual em select2- v4.0.1 você pode definir o valor assim:

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>
Expandir trecho

— Mosh Feu
fonte
Como posso definir o valor sem acionar o evento de alteração? O evento de mudança aciona meus próprios manipuladores de eventos que são feitos para quando o usuário altera o valor manualmente.
— enumag
A outra opção é destroychamar o plugin novamente .. Veja o código atualizado ..
— Mosh Feu
Existe uma maneira de obter as opções que passei originalmente para select2 para que eu não tenha que duplicá-las? De qualquer forma, essa solução parece mais um hack.
— enumag
Claro que é hach. A forma oficial segundo a documentação é acionar o evento de mudança. so that I wouldn't have to duplicate themPor que tenho que duplicá-los? Quando você faz, destroyo selectainda está lá com todos os seus options.
— Mosh Feu
Eu quis dizer as opções passadas para select2:$example.select2({ ... this ... })
— enumag
6

Para Ajax, use $(".select2").val("").trigger("change"). Isso deve resolver o problema.

— Sab
fonte
6

Eu acho que você precisa da initSelectionfunção

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});
— Ahmad Tarawneh
fonte
Isso está funcionando. Mas está obsoleto a partir da versão 4.0
— VisualBean
5

HTML

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JS

 $("#lang").select2().val('php').trigger('change.select2');

fonte: https://select2.github.io/options.html

— NaveenDA
fonte
5

Em Select2 V.4

usar $('selector').select2().val(value_to_select).trigger('change');

Eu acho que isso deve resultar

— Akash sharma
fonte
3

Defina o valor e acione o evento de alteração imediatamente.

$('#selectteam').val([183,182]).trigger('change');
— Manoj Patel
fonte
Obrigado mesmo meu dia
— Jaydeep purohit
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Resolvi meu problema com este código simples. Onde #select_location_id é um ID da caixa de seleção e value é o valor de uma opção listada na caixa select2.

— Numan Pathan
fonte
2

A resposta de Phan funcionou para mim:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Mas adicionar a mudança aciona o evento

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— Andres Rodriguez
fonte
1
Eu obtenho o erro "Uncaught TypeError: $ (...). Select2 (...). Change is not a function (...)" ao fazer isso dessa forma. Não acho que seja possível com a versão 4.x do Select2 - nada aqui funciona com ajax.
— MC9000
2

você pode usar este código:

$("#programid").val(["number:2", "number:3"]).trigger("change");

onde 2 em "número: 2" e 3 em "número: 3" são campos de id na matriz de objeto

— HamidReza
fonte
1

Às vezes, select2()estará carregando primeiro, e isso faz com que o controle não mostre corretamente o valor selecionado anteriormente. Atrasar alguns segundos pode resolver esse problema.

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);
— Poornima
fonte
1 
$('#inputID').val("100").select2();

Seria mais apropriado aplicar select2após escolher um dos seletos atuais.

— Mehmet Ali Ulusan
fonte
0

Fiz algo assim para predefinir elementos no menu suspenso select2 ajax

      //preset element values
        $(id).val(topics);
       //topics is an array of format [{"id":"","text":""}, .....]
          setTimeout(function(){
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            },1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url
— Ajeet Lakhani
fonte
0

Você deveria usar:

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
    // append the new option
    $("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) {
        selectedValues = new Array();
    }
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});
— Xman Classical
fonte
0

Se você estiver usando uma caixa de entrada, deve definir a propriedade "multiple" com seu valor como "true". Por exemplo,

<script>
    $(document).ready(function () {

        var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
            { id: 200, text: 'Lorem Ipsum 2'}];

        $('#inputID').select2({
            data: arr,
            width: 200,
            multiple: true
        });
    });
</script>
— Arun Banik
fonte
0

Nele select2 < version4existe a opção initSelection()de carregamento remoto de dados, através da qual é possível definir o valor inicial para a entrada como no modo de edição.

$("#e6").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax: { 
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) {
            // 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
            return { results: data.items };
        },
        cache: true
    },
    initSelection: function(element, callback) {
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") {
            $.ajax("https://api.github.com/repositories/" + id, {
                dataType: "json"
            }).done(function(data) { callback(data); });
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

Documentação fonte: Select2 - 3.5.3

— Sairam Suresh
fonte
0

Só para acrescentar a qualquer outra pessoa que possa ter tido o mesmo problema comigo.

Eu estava tentando definir a opção selecionada de minhas opções carregadas dinamicamente (de AJAX) e estava tentando definir uma das opções como selecionado dependendo de alguma lógica.

Meu problema surgiu porque eu não estava tentando definir a opção selecionada com base no ID que precisa corresponder ao valor, não o valor correspondente ao nome!

— Glen
fonte
0

Para vários valores, algo como este:

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

que se traduzirá em algo assim

$("#HouseIds").select2("val", [35293,49525]);
— Robert Benyi
fonte
0

Isso pode ajudar alguém a carregar dados select2 de AJAX ao carregar dados para edição ( aplicável para seleção única ou múltipla ):

Durante o carregamento do meu formulário / modelo:

  $.ajax({
        type: "POST",
        ...        
        success: function (data) {
          selectCountries(fixedEncodeURI(data.countries));
         }

Ligue para selecionar dados para Select2:

var countrySelect = $('.select_country');
function selectCountries(countries)
    {
        if (countries) {
            $.ajax({
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param({ 'idsSelected': countries }, true),

            }).then(function (data) {
                // create the option and append to Select2                     
                $.each(data, function (index, value) {
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                });
                // manually trigger the `select2:select` event
                countrySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        }
    }

e se você estiver tendo problemas com a codificação, você pode alterar conforme sua necessidade:

function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    }
— Kamran Ul Haq
fonte
0

se você está obtendo seus valores do ajax, antes de chamar 

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
Expandir trecho

confirme se a chamada ajax foi concluída, usando a função jquery quando

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
      // the code here will be executed when all four ajax requests resolve.
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,
      // status, and jqXHR object for each of the four ajax calls respectively.
    });
Expandir trecho
conforme descrito aqui [ Esperar até que todas as solicitações jQuery Ajax sejam concluídas?

— victor mwangi
fonte
0

Para desenvolver a resposta de @ tomloprod. Pela estranha chance de você estar usando x-editable e ter um campo select2 (v4) e vários itens que você precisa pré-selecionar. Você pode usar o seguinte código:

$("#select2field").on("shown", function(e, editable){
    $(["test1", "test2", "test3", "test4"]).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

e aqui está ele em ação:

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

$("#select2field").editable({
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '<select style="width: 201px;">',
        select2: {
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        },
        success: function(response, newValue) {
            console.log("success")
        },
        error: function(response, newValue) {
            if (response.status === 500) {
                return 'Service unavailable. Please try later.';
            } else {
                return response.responseJSON;
            }
        }
    });

var preselect= [
    {
        id: 1,
        text: 'bug'
    },
    {
    id: 4,
    text: 'wontfix'
}
];

 $("#select2field").on("shown", function(e, editable){
    $(preselect).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a id="select2field">bug, wontfix</a>
Expandir trecho

Eu acho que isso funcionaria mesmo se você não estiver usando x-editable. Espero que ele possa ajudar alguém.

— Renier
fonte
0

Você pode usar este código:

    $('#country').select2("val", "Your_value").trigger('change');

Coloque o valor desejado em vez de Your_value

Espero que funcione :)

— Espírito de Solução
fonte
-2

Legal e fácil:

document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";

E você muda id_citypara o id do seu select.

Edit: Após o comentário de Glen, percebo que devo explicar por que e como funcionou para mim:

Eu tinha tornado o select2trabalho muito bom para a minha forma. A única coisa que não consegui fazer funcionar foi mostrar o valor selecionado atualmente durante a edição. Ele estava pesquisando uma API de terceiros, salvando novos e editando registros antigos. Depois de um tempo percebi que não precisava definir o valor corretamente, apenas o rótulo dentro do campo, pois se o usuário não alterar o campo nada acontece. Depois de pesquisar e observar muitas pessoas que estão tendo problemas com ele, decidi fazer com Javascript puro. Funcionou e postei para talvez ajudar alguém. Também sugiro definir um cronômetro para ele.

— bonafernando
fonte
Essa resposta é um hack terrível que nem mesmo definiria o valor corretamente.
— Glen
Me desculpe por isso. Editarei minha resposta para explicar por que a postei.
— bonafernando
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.