source

jQuery Select2의 선택한 값을 설정하려면 어떻게 해야 합니다.

manycodes 2022. 11. 5. 09:02
반응형

jQuery Select2의 선택한 값을 설정하려면 어떻게 해야 합니다.

이것은 Select2 버전4 이전 코드에 속합니다.

는 간단한 를 가지고 .select2에이잭스

$("#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 프로그램 액세스는 이 기능에서는 동작하지 않습니다.

SELECT 2 < V4

순서 1: HTML

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

순서 2: Select 2 인스턴스 작성

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

AJAX를 사용하지 않고 select2를 사용하면 다음과 같이 할 수 있습니다.

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

SELECT 2 V4

select2 v4의 경우 다음과 같이 직접 옵션을 추가할 수 있습니다.

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

또는 JQuery를 사용하는 경우:

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

다른 예

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

Select2 컴포넌트의 "선택된" 값을 동적으로 설정하려면:

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

여기서 두 번째 매개 변수는 예상 값을 가진 개체입니다.

갱신:

이것은 기능합니다.새로운 select2에서는 표준 select2 오브젝트에서는 "a_key"가 "text"가 됩니다.따라서:{id: 100, text: 'Lorem Ipsum'}

예를 들어: 

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

@NoobishPro 덕분에

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

또한 select2에서 ajax를 사용하면 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>

이렇게 했는데...

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

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

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

이 추가를 사용해 보고 선택하십시오.AJAX 호출 시 옵션을 복제하지 않습니다.

의 현재 버전에서는 다음과 같이 값을 설정할 수 있습니다.

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>

에 너는 ㅇㅇㅇㅇㅇ가 할 것 같아.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; }
});

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

값을 설정하고 변경 이벤트를 즉시 트리거합니다.

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

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

하는 게 더 것 같아요.select2" " " " " " " " " " " " " " " "

Ajax의 Ajax를 합니다.$(".select2").val("").trigger("change")그러면 문제가 해결될 거예요.

Select 2 V.4에서

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

효과가 있을 것 같아요.

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

나는 이 간단한 코드로 문제를 해결했다.여기서 #select_location_id는 선택 상자의 ID이고 value는 선택 2 상자에 나열된 옵션의 값입니다.

판의 대답은 내게 효과가 있었다.

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

그러나 변경 사항을 추가하면 이벤트가 트리거됩니다.

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

,,,,,select2()이 경우 먼저 로딩되므로 컨트롤이 이전에 선택한 값을 올바르게 표시하지 않습니다.몇 초간의 지연으로 이 문제를 해결할 수 있습니다.

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

다음 코드를 사용할 수 있습니다.

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

여기서 "number:2"의 2와 "number:3"의 3은 객체 배열의 id 필드입니다.

이것으로 충분합니다.

        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});
    });
},

다음 코드를 사용할 수 있습니다.

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

Your_value 대신 원하는 값을 입력합니다.

효과가 있기를 바랍니다:)

공식 Select 2 문서에는 다음과 같은 내용이 기재되어 있습니다.

AJAX 소스로부터 데이터를 수신하는 Select2 컨트롤의 경우 .val()을 사용하면 동작하지 않습니다.컨트롤이 열리거나 사용자가 검색을 시작할 때까지 AJAX 요청이 실행되지 않으므로 옵션이 아직 없습니다.

을 「」로 설정합니다.select2 플레이스<option>를 달다<select>페이지 렌더링 중 태그 지정:

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

「 」라고 표시됩니다.Artselect2이 필드를 클릭하면 데이터가 Ajax를 통해 서버에서 가져오고 다른 옵션이 표시됩니다.

리모트 소스(AJAX) Select2 컨트롤에서 옵션을 미리 선택하면 AJAX 소스로부터 데이터를 수신하는 Select2 컨트롤에서는 .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
    }
});
});

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

다음을 사용해야 합니다.

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

입력 상자를 사용하는 경우 "복수" 속성과 값을 "참"으로 설정해야 합니다.예를들면,

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

»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
});

소스 매뉴얼 : Select 2 - 3.5.3

저와 같은 문제를 제기했을지도 모르는 사람을 더해서요.

(AJAX에서) 동적으로 로드된 옵션 중 선택한 옵션을 설정하려고 했고, 몇 가지 논리에 따라 옵션 중 하나를 선택으로 설정하려고 했습니다.

이름과 일치하는 값이 아니라 값과 일치해야 하는 ID에 따라 선택한 옵션을 설정하려고 하지 않았기 때문에 문제가 발생했습니다.

다음과 같은 여러 값의 경우:

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

이렇게 해석할 수 있습니다.

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

이렇게 하면 편집할 데이터를 로드하는 동안 AJAX에서 선택 2개 데이터를 로드하는 데 도움이 될 수 있습니다(단일 또는 다중 선택에 적용 가능).

폼/모델 로드 시:

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

Select 2의 데이터를 선택하기 위한 호출:

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

    }

@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을 사용하지 않아도 될 것 같습니다.나는 htis가 누군가를 도울 수 있기를 바란다.

나는 라라벨과 함께 아약스 소스와 함께 select2를 사용한다.내 경우 페이지에서 받은 간단한 작업 사이클링 옵션을 선택하고 선택 2에 옵션을 추가합니다.

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

$('#stato')는 서버 측 부하가 있는 선택 2입니다.

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

내 경우 옵션 텍스트를 호출할 수 있습니다.find메서드는 Ajax 콜을 사용하여 실행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/25187926/how-to-set-selected-value-of-jquery-select2

반응형

'source' 카테고리의 다른 글

Python에서 문자열을 소문자로 만들려면 어떻게 해야 하나요?  (0) 2022.11.05
MySQL의 CONCAT에서 GROUP_CONCAT를 사용하는 방법  (0) 2022.11.05
Python의 추상 클래스와 인터페이스의 차이  (0) 2022.11.05
리액트 라우터 v4/v5를 사용한 네스트 루트  (0) 2022.11.05
LIKE 와일드카드를 사용하여 열에서 검색(대문자와 소문자를 구분하지 않음)하려면 어떻게 해야 합니까?  (0) 2022.11.05

'source'의 다른글

  • 현재글jQuery Select2의 선택한 값을 설정하려면 어떻게 해야 합니다.

관련글

댓글

티스토리툴바