Как установить выбранное значение jquery select2?

Question

Как установить выбранное значение jquery select2?

Это относится к кодам до select2 версии 4

У меня есть простой код select2 которые получают данные из 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; }
});

Этот код работает, однако мне нужно установить для него значение, как будто в режиме редактирования. Когда пользователь выбирает значение в первый раз, оно будет сохранено, а когда ему нужно отредактировать это значение, оно должно появиться в том же меню выбора (select2), чтобы выбрать ранее выбранное значение, но я не могу найти способ.

ОБНОВИТЬ:

HTML-код:

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

Программный доступ Select2 не работает с этим.

157

javascript php jquery ajax jquery-select2

Источник

user3399676 07 авг '14 в 16:45

36 ответов

Решение

SELECT2

Шаг № 1: HTML

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

Шаг № 2: Создайте экземпляр 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;
      }
});

Шаг № 3: Установите желаемое значение

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

Если вы используете select2 без AJAX, вы можете сделать следующее:

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

Вы также можете сделать это:

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

SELECT2 V4

Для select2 v4 вы можете напрямую добавить опцию / ы следующим образом:

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

Или с помощью JQuery:

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

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

другой пример

$("select123455").val(5).trigger('change');

213

Источник

user4359029 15 янв '15 в 13:43

Также, как я пытался, при использовании ajax в select2, методы программного управления для установки новых значений в select2 не работают для меня! Теперь я пишу эти коды для решения проблемы:

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

Вы можете проверить полный пример кода по ссылке здесь: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
В этом примере кода есть ajax select2, и вы можете установить новое значение с помощью кнопки.

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

30

Источник

user1407491 22 фев '16 в 01:03

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

30

Источник

user1002645 22 дек '14 в 03:30

Я так и сделал

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

26

Источник

user1053191 26 май '18 в 06:04

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

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

Попробуйте это добавить, затем выберите. Не дублирует опцию при вызове AJAX.

14

Источник

user7124120 07 ноя '16 в 00:20

Установите значение и немедленно активируйте событие изменения.

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

11

Источник

user11984368 27 авг '19 в 18:12

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

Уместнее было бы применить select2 после выбора одного из текущего выбора.

10

Источник

user2713859 18 май '20 в 06:37

В текущей версии на select2 - v4.0.1 Вы можете установить значение следующим образом:

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>

10

Источник

user863110 01 фев '16 в 13:30

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

источник: https://select2.github.io/options.html

8

Источник

user6335029 28 ноя '16 в 07:46

Я думаю, что вам нужно initSelection функция

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

7

Источник

user1002645 14 апр '15 в 11:02

Для Ajax используйте $(".select2").val("").trigger("change"), Это должно решить проблему.

6

Источник

user3746420 03 мар '16 в 20:38

В Select2 V.4

использование $('selector').select2().val(value_to_select).trigger('change');

Я думаю, что это должно работать

6

Источник

user4992190 30 авг '17 в 10:02

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

Я решил свою проблему с помощью этого простого кода. Где #select_location_id - это идентификатор поля выбора, а значение - это значение параметра, указанного в поле выбора2.

3

Источник

user6512172 08 ноя '19 в 11:59

Эта работа для меня отлично:

              initSelection: function (element, callback) {
    var id = $(element).val();
    $.ajax("url/" + id, {
        dataType: "json"
    }).done(function (data) {
        var newOption = new Option(data.title, data.id, true, true);
        $('#select2_id').append(newOption).trigger('change');
        callback({"text": data.title, "id": data.id});
    });
},

2

Источник

user5853235 14 мар '21 в 09:30

Вы можете использовать этот код:

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

где 2 в "number:2" и 3 в "number:3" являются полем id в массиве объектов

2

Источник

user767555 08 июл '18 в 17:37

Иногда, select2() будет загружаться в первую очередь, и это заставит элемент управления не отображать ранее выбранное значение правильно. Задержка на несколько секунд может решить эту проблему.

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

2

Источник

user9230386 17 янв '18 в 15:36

Ответ Фэна работал для меня:

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

Но добавление изменений вызывает событие

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

2

Источник

user5602481 31 окт '16 в 13:48

Вы можете использовать этот код:

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

Поставьте желаемое значение вместо Пакистана

Надеюсь, это сработает:)

1

Источник

user7849868 28 янв '18 в 14:28

Официальная документация Select2 гласит:

Для элементов управления Select2, которые получают свои данные из источника AJAX, использование .val() не будет работать. Параметры еще не существуют, потому что запрос AJAX не запускается, пока элемент управления не будет открыт и / или пользователь не начнет поиск.

Установить значение в поле <option> тег внутри <select> во время рендеринга страницы:

      <select id="input-degree">
    <option value="1">Art</option>
</select>

Когда страница загрузится, вы увидите Art в select2поле. Если мы нажмем на это поле, данные будут получены с сервера через ajax, и будут показаны другие параметры.

1

Источник

user1921272 11 авг '21 в 16:50

Предварительный выбор параметров в удаленном (AJAX) элементе Select2 Для элементов управления Select2, которые получают свои данные из источника AJAX, использование .val() не будет работать. Параметры еще не существуют, потому что запрос AJAX не запускается, пока элемент управления не будет открыт и / или пользователь не начнет поиск. Это еще больше усложняется фильтрацией на стороне сервера и разбиением на страницы - нет гарантии, когда конкретный элемент действительно будет загружен в элемент управления Select2!

Поэтому лучший способ справиться с этим - просто добавить предварительно выбранный элемент в качестве новой опции. Для данных из удаленных источников это, вероятно, потребует создания новой конечной точки API в вашем серверном приложении, которое может извлекать отдельные элементы:

      $('#mySelect2').select2({
ajax: {
    url: '/api/students'
}
});
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');

// manually trigger the `select2:select` event
studentSelect.trigger({
    type: 'select2:select',
    params: {
        data: data
    }
});
});

1

Источник

user9931115 29 окт '21 в 02:06

Вы пытались установить для параметра «выбранный флаг» значение true?

0

Источник

Isara Nakavisute 13 июл '22 в 04:51

Если вы используете поле ввода, вы должны установить свойство "множественное" со значением "true". Например,

<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

Источник

user1890721 08 янв '17 в 12:25

Для нескольких значений что-то вроде этого:

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

который будет переводить на что-то вроде этого

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

0

Источник

user1049910 26 сен '18 в 14:06

Я сделал что-то вроде этого для предустановки элементов в выпадающем списке ajax select2

      //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

Источник

user3079969 15 янв '16 в 11:55

В select2 < version4 есть вариант initSelection() для удаленной загрузки данных, с помощью которой можно установить начальное значение для входа, как в режиме редактирования.

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

Исходная документация: Select2 - 3.5.3

0

Источник

user3940922 17 июл '17 в 19:03

Просто чтобы добавить кого-то еще, кто, возможно, придумал ту же проблему со мной.

Я пытался установить выбранную опцию из моих динамически загружаемых опций (из AJAX) и пытался установить одну из опций в зависимости от некоторой логики.

Моя проблема возникла из-за того, что я не пытался установить выбранную опцию на основе идентификатора, который должен соответствовать значению, а не значению, соответствующему имени!

0

Источник

user1559334 31 янв '18 в 11:59

Чтобы построить поверх ответа @tomloprod. По нечетной вероятности, что вы используете x-editable, имеете поле select2(v4) и несколько элементов, которые вам нужно предварительно выбрать. Вы можете использовать следующий фрагмент кода:

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

и вот оно в действии:

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>

Я думаю, это сработает, даже если вы не используете x-editable. Надеюсь, что это могло кому-то помочь.

0

Источник

user2173793 16 мар '20 в 17:30

Это может помочь кому-то загрузить данные select2 из AJAX при загрузке данных для редактирования (применимо для одиночного или множественного выбора):

Во время загрузки моей формы / модели:

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

Позвоните, чтобы выбрать данные для 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
                    }
                });
            });
        }
    }

и если у вас могут возникнуть проблемы с кодировкой, вы можете изменить их по своему усмотрению:

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

    }

0

Источник

user5141710 07 сен '19 в 17:32

Я использую select2 с источником ajax с Laravel. В моем случае это простой вариант рабочего цикла, который я получаю со страницы и добавляю вариант для выбора2 ..

$filterri->stato = [1,2,...];

$('#stato') - мой select2 с загрузкой на стороне сервера

      <script>
    @foreach ($filtri->stato as $item)
       $('#stato').append(new Option("{{\App\Models\stato::find($item)->nome}}",{{$item}}, false, true));
    @endforeach
</script>

В моем случае я могу назвать текст опциона с помощью find метод, но можно сделать это с помощью вызова ajax

0

Источник

user5324982 02 фев '21 в 13:52

Другие вопросы по тегам javascript php jquery ajax jquery-select2

user794641 09 авг '14 в 09:53 2014-08-09 09:53 · Accepted Answer · 2014-08-09 09:53

Чтобы динамически установить "выбранное" значение компонента Select2:

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

Где второй параметр - это объект с ожидаемыми значениями.

ОБНОВИТЬ:

Это работает, просто хотел заметить, что в новом select2 "a_key" - это "текст" в стандартном объекте select2. так: {id: 100, text: 'Lorem Ipsum'}

Пример:

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

Благодаря @NoobishPro