Comment définir la valeur sélectionnée de jquery select2?

99

Cela appartient aux codes antérieurs à select2 version 4

J'ai un code simple select2pour obtenir des données d'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; }
});

Ce code fonctionne, cependant, je dois définir une valeur dessus comme si en mode édition. Lorsque l'utilisateur sélectionne une valeur pour la première fois, elle sera enregistrée et quand il aura besoin de modifier cette valeur, elle doit apparaître dans le même menu de sélection ( select2) pour sélectionner la valeur précédemment sélectionnée, mais je ne trouve pas de moyen.

METTRE À JOUR:

Le code HTML:

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

L'accès par programme Select2 ne fonctionne pas avec cela.

javascript php jquery ajax jquery-select2 Clarifier les deux
la source

Vous devriez pouvoir simplement définir la valeur sélectionnée dans le code html ou utiliser$("#programid").val()

Explosion Pills

@ExplosionPills Negative, j'ai essayé ça aussi j'ai une valeur vide. Comment utiliser programid.val ()? J'ai obtenu la valeur du serveur, puis je dois la définir dans ce champ caché de select2.

ClearBoth

@ClearBoth Je ne sais pas si je comprends ce que tu veux dire. Essayez-vous de définir la valeur "sélectionnée" du composant Select2 sur l'un des résultats extraits AJAX?

An Phan

@AnPhan Oui, y a-t-il un moyen de faire ça?

ClearBoth

@ClearBoth Il y en a. Vérifiez ma réponse ci-dessous.

An Phan

61

Pour définir dynamiquement la valeur "sélectionnée" d'un composant Select2:

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

Où le deuxième paramètre est un objet avec des valeurs attendues.

METTRE À JOUR:

Cela fonctionne, je voulais juste noter que dans le nouveau select2, "a_key" est "text" dans un objet select2 standard. alors:{id: 100, text: 'Lorem Ipsum'}

Exemple:

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

Merci à @NoobishPro

An Phan
la source

1

J'essayais avec l'identifiant uniquement select2 ('val', '1') mais cela n'a pas fonctionné. Merci

ClearBoth

6

Cela fonctionne, je voulais juste noter que dans le nouveau select2, "a_key" est "text" dans un objet select2 standard. donc: {id: 100, texte: 'Lorem Ipsum'}

NoobishPro

2

même ici sur v4. Je me suis arraché les cheveux sur celui-ci. Je ne pense pas que ce soit possible sans passer aux solutions JavaScript. Vous recherchez un autre menu déroulant jQuery / Bootstrap Select2 maintenant (2 jours de manipulation de toutes les méthodes imaginables - pas de joie!)

MC9000

29

Select2 v4: $('#inputID').val(100).trigger('change') Voir select2.github.io

Paul

@NoobishPro & An Phan - Merci pour la réponse et le commentaire

Sinto

104

SELECT2 <V4

Étape n ° 1: HTML

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

Étape # 2: Créez une instance 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;
      }
});

Étape n ° 3: définissez la valeur souhaitée

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

Si vous utilisez select2 sans AJAX, vous pouvez procéder comme suit:

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

Vous pouvez également le faire:

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

SELECT2 V4

Pour select2 v4, vous pouvez ajouter directement une / des option (s) comme suit:

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

Ou avec JQuery:

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

autre exemple

$("#myMultipleSelect2").val(5).trigger('change');

tomloprod
la source

3

trigger ('changer'); est la partie importante

mihkov

$ ("# mySelect2"). select2 ("val", "0") - cela déclenchera un événement jquery de changements de valeur. Comment éviter que cela ne se produise. Habituellement, lorsque l'utilisateur soumet le formulaire, une fois terminé, je réinitialise toutes les données du formulaire. La réinitialisation ne réinitialise pas select2. L'utilisation de select2 ("val", "0") déclenchera des changements ce qui est fou car aucune action de l'utilisateur.

cavalier rbk

Version 4 select2.org/programmatic-control/add-select-clear-items

Ryan

Recommandé pour le .trigger ('change')

JP Dolocanog le

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
la source

2

comment définir par texte plutôt que val

Rizwan Patel

La question était de savoir comment faire cela après le chargement avec l'appel AJAX. Cette réponse ne fonctionne pas dans ce cas.

MC9000

cela déclenchera des changements de valeur de select2 qui seront bizarres si vous avez cet événement à traiter, et il s'est déclenché sans que l'utilisateur ne le fasse

cavalier rbk

17

De plus, comme j'ai essayé, lorsque j'utilise ajax dans select2, les méthodes de contrôle par programmation pour définir de nouvelles valeurs dans select2 ne fonctionnent pas pour moi! Maintenant, j'écris ces codes pour résoudre le problème:

$('#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

Vous pouvez tester un exemple de code complet dans le lien ici: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
Dans cet exemple de code, il existe un ajax select2 et vous pouvez définir une nouvelle valeur avec un bouton.

Afficher l'extrait de code

$("#btn").click(function() {
  $('#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
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    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.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select id="sel" multiple="multiple" class="col-xs-5">
</select>

<button id="btn">Set Default</button>

Développer l'extrait

Nabi KAZ
la source

J'utilise différents displayKey et trucs (c'était une mauvaise idée cependant) - cela aide parfaitement pour mes tests d'acceptation avec Codeception

MonkeyMonkey

2

Fastidieux, bien sûr, mais, comme tout le monde le découvre, Select2 v4 n'a tout simplement aucun moyen de faire quelque chose d'aussi ridiculement simple que de définir une sélection par défaut

MC9000

J'ai trouvé que cette réponse était le seul moyen de faire select2 v4 - ajax select.

13

var $option = $("<option selected></option>").val('1').text("Pick me");

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

Essayez cet ajout, puis sélectionnez. Ne duplique pas l'option lors de l'appel AJAX.

Jigz
la source

var $ option = $ ("<option sélectionnée> </option>") .val ('1'). text ("Choisissez-moi"); $ ('# select_id'). append ($ option) .trigger ('change');

Jigz

Merci. travaux confirmés sur la version 4.0.0 (appel ajax)

khalil

Encore un succès confirmé sur la version 4 avec ajax.

un codeur le

Si vous utilisez une boîte de recherche avec ajax, c'est la bonne solution. Celui-ci a fonctionné pour moi juin 2019.

Eric Skiff

12

J'ai aimé ça

$("#drpServices").select2().val("0").trigger("change");

Ashi
la source

2

Veuillez fournir des explications pour aider les utilisateurs à comprendre le fonctionnement de votre code et à répondre à la question du PO.

Ivan

@Ivan, je faisais comme ça $ ("# drpServices"). Val ("0"); qui ne sélectionnera pas la taxe dans la liste déroulante select2, pour affecter à la fois la valeur et le texte, nous avons besoin de la fonction de changement de déclenchement de select2. Cela fonctionne parfaitement pour moi. J'espère que les utilisateurs comprendront.

Ashi

9

Dans la version actuelle sur select2- v4.0.1 vous pouvez définir la valeur comme ceci:

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>

Développer l'extrait

Mosh Feu
la source

Comment puis-je définir la valeur sans déclencher l'événement de modification? L'événement de modification déclenche mes propres gestionnaires d'événements qui sont destinés lorsque l'utilisateur modifie la valeur manuellement.

énumération du

L'autre option est d' destroyappeler à nouveau le plugin .. Voir le code mis à jour ..

Mosh Feu

Existe-t-il un moyen d'obtenir les options que j'ai initialement transmises à select2 afin de ne pas avoir à les dupliquer? Quoi qu'il en soit, cette solution ressemble plus à un hack.

énumération du

Bien sûr, c'est hach. La manière officielle selon la documentation est de déclencher un événement de changement. so that I wouldn't have to duplicate themPourquoi faut-il les dupliquer? Quand vous faites destroyle selectest toujours là avec tout le sien options.

Mosh Feu

Je voulais dire les options passées à select2:$example.select2({ ... this ... })

enumag

6

Pour Ajax, utilisez $(".select2").val("").trigger("change"). Cela devrait résoudre le problème.

Sab
la source

6

Je pense que tu as besoin de la initSelectionfonction

$("#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
la source

Cela fonctionne. Mais est obsolète à partir de la version 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');

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

NaveenDA
la source

5

Dans Select2 V.4

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

Je pense que ça devrait marcher

Akash sharma
la source

3

Définissez la valeur et déclenchez immédiatement l'événement de modification.

$('#selectteam').val([183,182]).trigger('change');

manoj patel
la source

Merci même ma journée

Jaydeep purohit

3

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

J'ai résolu mon problème avec ce code simple. Où #select_location_id est un ID de la boîte de sélection et la valeur est la valeur d'une option répertoriée dans la boîte de sélection2.

Numan Pathan
la source

2

La réponse d'un Phan a fonctionné pour moi:

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

Mais l'ajout du changement déclenche l'événement

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

Andres Rodriguez
la source

1

J'obtiens l'erreur «Uncaught TypeError: $ (...). Select2 (...). Change is not a function (…)» en le faisant de cette façon. Je ne pense pas que ce soit possible avec la version 4.x de Select2 - rien ici ne fonctionne avec ajax.

MC9000

2

vous pouvez utiliser ce code:

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

où 2 dans «nombre: 2» et 3 dans «nombre: 3» sont le champ id dans le tableau d'objets

HamidReza
la source

1

Parfois, select2()sera le chargement en premier, ce qui empêche le contrôle d'afficher correctement la valeur précédemment sélectionnée. Un délai de quelques secondes peut résoudre ce problème.

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);

Poornima
la source

1

$('#inputID').val("100").select2();

Il serait plus approprié de postuler select2après avoir choisi l'une des sélections actuelles.

Mehmet Ali Ulusan
la source

0

J'ai fait quelque chose comme ça pour prérégler des éléments dans la liste déroulante 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
la source

0

Tu devrais utiliser:

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 classique
la source

0

Si vous utilisez une zone de saisie, vous devez définir la propriété "multiple" avec sa valeur "true". Par exemple,

<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
la source

0

Dans select2 < version4il y a l'option initSelection()pour le chargement de données à distance, grâce à laquelle il est possible de définir la valeur initiale de l'entrée comme en mode d'édition.

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

Documentation source: Select2 - 3.5.3

Sairam Suresh
la source

0

Juste pour ajouter à tous ceux qui ont peut-être rencontré le même problème avec moi.

J'essayais de définir l'option sélectionnée de mes options chargées dynamiquement (à partir d'AJAX) et j'essayais de définir l'une des options comme sélectionnée en fonction d'une logique.

Mon problème est venu parce que je n'essayais pas de définir l'option sélectionnée en fonction de l'ID qui doit correspondre à la valeur, et non à la valeur correspondant au nom!

Glen
la source

0

Pour plusieurs valeurs, quelque chose comme ceci:

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

qui se traduira par quelque chose comme ça

$("#HouseIds").select2("val", [35293,49525]);

Robert Benyi
la source

0

Cela peut aider quelqu'un à charger des données select2 à partir d'AJAX lors du chargement des données pour l'édition ( applicable pour une ou plusieurs sélections ):

Pendant le chargement de mon formulaire / modèle:

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

Appelez pour sélectionner les données pour 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
                    }
                });
            });
        }
    }

et si vous rencontrez des problèmes avec le codage, vous pouvez changer selon vos besoins:

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

    }

Kamran Ul Haq
la source

0

si vous récupérez vos valeurs d'ajax, avant d'appeler

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

Développer l'extrait

confirmez que l'appel ajax est terminé, en utilisant la fonction jquery lorsque

$.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.
    });

Développer l'extrait

comme décrit ici [ Attendez que toutes les requêtes jQuery Ajax soient terminées?

Victor Mwangi
la source

0

Pour construire sur la réponse de @ tomloprod. Par chance que vous utilisiez x-editable , que vous ayez un champ select2 (v4) et que vous ayez plusieurs éléments à présélectionner. Vous pouvez utiliser le morceau de code suivant:

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

et le voici en action:

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>

Développer l'extrait

Je suppose que cela fonctionnerait même si vous n'utilisez pas x-editable. J'espère que cela pourra aider quelqu'un.

Renier
la source

0

Vous pouvez utiliser ce code:

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

Mettez la valeur souhaitée au lieu de Your_value

J'espère que cela fonctionnera :)

Esprit de solution
la source

-2

Agréable et facile:

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

Et vous passez id_cityà l'identifiant de votre sélection.

Edit: Après le commentaire de Glen, je me rends compte que je devrais expliquer pourquoi et comment cela a fonctionné pour moi:

J'avais rendu le select2travail vraiment agréable pour ma forme. La seule chose que je ne pouvais pas faire était d'afficher la valeur actuelle sélectionnée lors de l'édition. Il recherchait une API tierce, sauvegardant de nouveaux enregistrements et modifiant les anciens enregistrements. Au bout d'un moment, j'ai réalisé que je n'avais pas besoin de définir correctement la valeur, seulement l'étiquette à l'intérieur du champ, car si l'utilisateur ne change pas le champ, rien ne se passe. Après avoir cherché et examiné beaucoup de gens qui avaient des problèmes, j'ai décidé de le faire avec du Javascript pur. Cela a fonctionné et j'ai posté pour peut-être aider quelqu'un. Je suggère également de régler une minuterie pour cela.

bonafernando
la source

Cette réponse est un horrible hack qui ne définirait même pas la valeur correctement.

Glen

Je suis désolé à ce sujet. Je modifierai ma réponse pour expliquer pourquoi je l'ai publiée.

bonafernando

Comment définir la valeur sélectionnée de jquery select2?

Réponses:

SELECT2 <V4

Étape n ° 1: HTML

Étape # 2: Créez une instance de Select2

Étape n ° 3: définissez la valeur souhaitée

SELECT2 V4