wake-up-neo.com

Wie setze ich den ausgewählten Wert von Jquery Select2?

Dies gehört zu Codes vor select2 Version 4

Ich habe einen einfachen Code von select2, der Daten von Ajax bezieht

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

Dieser Code funktioniert, jedoch muss ich einen Wert wie im Bearbeitungsmodus festlegen. Wenn der Benutzer zum ersten Mal einen Wert auswählt, wird er gespeichert. Wenn er diesen Wert bearbeiten muss, muss er im selben Auswahlmenü (select2) angezeigt werden, um den zuvor ausgewählten Wert auszuwählen, aber ich finde keinen Weg. 

AKTUALISIEREN:

Der HTML-Code:

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

Select2 programmatischer Zugriff funktioniert nicht damit.

javascriptphpjqueryajaxjquery-select2
66
ClearBoth

So legen Sie den "ausgewählten" Wert einer Select2-Komponente dynamisch fest:

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

Der zweite Parameter ist ein Objekt mit erwarteten Werten.

UPDATE:

Das klappt, ich wollte nur beachten, dass "a_key" ist "Text" in einem neuen select2-Objekt. also: {id: 100, text: 'Lorem Ipsum'} 

Beispiel:  

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

Danke an @NoobishPro

42
An Phan

SELECT2 <V4

Schritt # 1: HTML

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

Schritt 2: Erstellen Sie eine Instanz von 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;
      }
});

Schritt 3: Stellen Sie Ihren gewünschten Wert ein

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

Wenn Sie select2 ohne AJAX verwenden, können Sie Folgendes tun:

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

Sie können dies auch tun:

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

SELECT2 V4

Für select2 v4 können Sie eine Option/s direkt wie folgt anhängen:

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

Oder mit JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")

$("#myMultipleSelect2").append($newOption).trigger('change');

anderes Beispiel

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

Wie ich es auch versucht habe, wenn ajax in select2 verwendet wird, funktionieren die programmatischen Steuerungs Methoden zum Setzen neuer Werte in select2 nicht für mich! Jetzt schreibe ich diesen Code, um das Problem zu beheben:

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

Sie können den vollständigen Beispielcode in diesem Link testen: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
In diesem Beispielcode ist ein Ajax select2 enthalten, und Sie können einen neuen Wert mit einer Schaltfläche festlegen.

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

13
Nabi K.A.Z.

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

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

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

Versuchen Sie es mit diesem Anhängen und wählen Sie dann aus. Die Option wird beim Aufruf von AJAX nicht dupliziert.

8
Jigo Palillo

In der aktuellen Version von select2 - v4.0.1 können Sie den Wert folgendermaßen einstellen:

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>

6
Mosh Feu

Ich mochte das

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

Ich denke, Sie benötigen die initSelection-Funktion 

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

Verwenden Sie für Ajax $(".select2").val("").trigger("change"). Das sollte das Problem lösen.

4
Sab

In Select2 V.4

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

Ich denke es sollte funktionieren

3
Akash sharma

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

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

3
NaveenDA

Du solltest benutzen:

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
});
0
Xman Classical

In select2 < version4 gibt es die Option initSelection() für das Fernladen von Daten, durch die es möglich ist, den Anfangswert für die Eingabe wie im Bearbeitungsmodus festzulegen.

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

Quelldokumentation: Select2 - 3.5.3

0
Sairam Suresh

Manchmal wird select2() zuerst geladen, wodurch das Steuerelement den zuvor ausgewählten Wert nicht korrekt anzeigt. Eine Verzögerung für einige Sekunden kann dieses Problem beheben.

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

Stellen Sie den Wert ein und lösen Sie das Änderungsereignis sofort aus.

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

Schön und einfach:

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

Und Sie ändern id_city in die ID Ihrer Auswahl.

Edit: Nach Glen's Kommentar muss ich erklären, warum und wie es für mich funktioniert hat:

Ich hatte select2 für mein Formular wirklich schön gemacht. Das einzige, was ich nicht machen konnte, war, den aktuell ausgewählten Wert während der Bearbeitung anzuzeigen. Es wurde nach einer API eines Drittanbieters gesucht, um neue zu speichern und alte Datensätze zu bearbeiten. Nach einer Weile wurde mir klar, dass ich den Wert nicht richtig einstellen musste, nur die Beschriftung im Feld, denn wenn der Benutzer das Feld nicht ändert, passiert nichts. Nach der Suche und Suche nach einer Menge Leute, die Probleme damit hatten, entschied ich mich, es mit reinem Javascript zu machen. Es hat funktioniert und ich habe gepostet, vielleicht jemandem zu helfen. Ich schlage auch vor, einen Timer dafür einzustellen.

0
bonafernando

Ich habe so etwas gemacht, um Elemente in select2 ajax dropdown voreinzustellen

      //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
0
Ajeet Lakhani

Ich möchte nur irgendjemandem hinzufügen, der vielleicht mit mir das gleiche Problem hatte.

Ich habe versucht, die ausgewählte Option meiner dynamisch geladenen Optionen (von AJAX) einzustellen, und habe versucht, eine der Optionen als ausgewählt festzulegen, abhängig von einer bestimmten Logik.

Mein Problem trat auf, weil ich nicht versuchte, die ausgewählte Option basierend auf der ID festzulegen, die mit dem Wert übereinstimmen muss, nicht mit dem Wert, der mit dem Namen übereinstimmt!

0
Glen

sie können diesen Code verwenden:

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

dabei sind 2 in "number: 2" und 3 in "number: 3" das ID-Feld im Objektarray

0
HamidReza

Eine Antwort von Phan funktionierte für mich:

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

Das Hinzufügen der Änderung löst jedoch das Ereignis aus

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

Wenn Sie ein Eingabefeld verwenden, müssen Sie die Eigenschaft "multiple" mit dem Wert "true" festlegen. Zum Beispiel,

<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>
0
Arun Banik

Für mehrere Werte etwa so:

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

das wird so etwas übersetzen

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