jquery select2의 선택한 값을 설정하는 방법은 무엇입니까?

99

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

select2ajax에서 데이터를 가져 오는 간단한 코드가 있습니다.

$("#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 프로그래밍 방식 액세스 는 이것과 함께 작동하지 않습니다.

javascript  php  jquery  ajax  jquery-select2 
— ClearBoth
소스
단지 HTML 또는 사용에 선택된 값을 설정하는 방법은 수 있어야합니다$("#programid").val()
— 폭발 알약
@ExplosionPills Negative, 나도 빈 값을 얻었습니다. programid.val ()을 어떻게 사용해야합니까? 서버에서 값을 얻은 다음 select2의이 숨겨진 필드에 설정해야합니다.
— ClearBoth
@ClearBoth 내가 무슨 뜻인지 확실하지 않습니다. Select2 구성 요소의 "선택된"값을 AJAX 검색 결과 중 하나로 설정하려고합니까?
— An Phan
@AnPhan 예, 그렇게 할 방법이 있습니까?
— ClearBoth
@ClearBoth 있습니다. 아래에서 내 대답을 확인하십시오.
— An Phan

답변:

61

Select2 구성 요소의 "선택된"값을 동적으로 설정하려면 :

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

두 번째 매개 변수는 예상 값이있는 객체입니다.

최신 정보:

이것은 작동합니다. 새로운 select2에서 "a_key" 는 표준 select2 객체의 "text" 라는 점에 주목하고 싶었습니다 . 그래서:{id: 100, text: 'Lorem Ipsum'}

예: 

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

@NoobishPro 덕분에

— 안 판
소스
1
나는 id only select2 ( 'val', '1')으로 시도했지만 작동하지 않았습니다. 감사합니다
— ClearBoth
6
이것은 작동합니다. 새로운 select2에서 "a_key"는 표준 select2 객체의 "text"라는 점에 주목하고 싶었습니다. 그래서 : {id : 100, text : 'Lorem Ipsum'}
— NoobishPro
2
v4에서도 마찬가지입니다. 이것에 내 머리카락을 뽑아 냈어. JavaScript 솔루션 없이는 불가능하다고 생각합니다. 지금 또 다른 jQuery / Bootstrap Select2 드롭 다운을 찾고 있습니다 (상상할 수있는 모든 방법을 2 일 동안 조작-기쁨이 없습니다!)
— MC9000
29
Select2 v4 : select2.github.io/…$('#inputID').val(100).trigger('change') 참조
— Paul
@NoobishPro 및 판 - 도움말 및 의견을 주셔서 감사합니다
— Sinto
104

SELECT2 <V4

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

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

SELECT2 V4

들어 V4 선택 2 직접 옵션을 추가 할 수 있습니다 / 다음과 같이 S :

<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');
— Tomloprod
소스
3
trigger ( '변경'); 중요한 부분입니다
— mihkov는
$ ( "# mySelect2"). select2 ( "val", "0")-값 변경의 jquery 이벤트를 트리거합니다. 이를 방지하는 방법. 일반적으로 사용자가 양식을 제출할 때 완료 후 모든 양식 데이터를 재설정합니다. 재설정은 select2를 재설정하지 않습니다. select2 ( "val", "0")를 사용하면 사용자가 아무런 조치를 취하지 않는 것처럼 미친 변경을 트리거합니다.
— 점퍼 rbk
— Ryan
.trigger ( 'change')에 대한 찬사
— JP Dolocanog
23

HTML :

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

자바 스크립트 :

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

jsfiddle

— 아마드 타로 네
소스
2
발 대신 텍스트로 설정하는 방법
— Rizwan Patel 2016
질문은 AJAX 호출로로드 한 후이를 수행하는 방법이었습니다. 이 답변은이 경우 작동하지 않습니다.
— MC9000 2016
이 이벤트를 처리 할 경우 이상하게 될 select2 값 변경이 트리거되고 사용자가 수행하지 않고 트리거됩니다
— jumper rbk
17

또한 내가 시도한 것처럼 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가 있으며 버튼으로 새 값을 설정할 수 있습니다.

코드 스 니펫 표시

— 나비 KAZ
소스
나는 다른 displayKey와 물건을 사용하고있다 (그러나 나쁜 생각이었다) – 이것은 Codeception으로 나의 수용 테스트를 완벽하게 도와 준다.
— MonkeyMonkey
2
확실히 지루하지만, 모두가 알고 있듯이 Select2 v4는 기본 선택을 설정하는 것만 큼 엄청나게 간단한 일을 할 수있는 방법이 없습니다
— MC9000
이 답변이 select2 v4-ajax select를 만드는 유일한 방법이라는 것을 알았습니다.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

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

이 추가를 시도한 다음 선택하십시오. AJAX 호출시 옵션을 복제하지 않습니다.

— Jigz
소스
var $ option = $ ( "<option selected> </ option>"). val ( '1'). text ( "Pick me"); $ ( '# select_id'). append ($ option) .trigger ( 'change');
— Jigz 2016
감사. 버전 4.0.0 (아약스 호출)에 대한 확인 작업
— 칼릴
ajax 버전 4에서 또 다른 성공을 확인했습니다.
— 코더
ajax와 함께 검색 가능한 상자를 사용하는 경우 이것이 올바른 솔루션입니다. 이것은 6 월 2019 년 나를 위해 일한
— 에릭 스키 프
12

나는 이것을했다-

$("#drpServices").select2().val("0").trigger("change");
— 아시
소스
2
사용자가 코드 작동 방식을 이해하고 OP의 질문에 답할 수 있도록 몇 가지 설명을 제공하세요.
— Ivan
@Ivan, 나는 이렇게하고 있었다 $ ( "# drpServices"). val ( "0"); select2 드롭 다운에서 Taxt을 선택하지 않습니다. 값과 텍스트 모두에 영향을 미치기 위해 select2의 트리거 변경 기능이 필요합니다. 이것은 나를 위해 완벽하게 작동합니다. 사용자가 이해하기를 바랍니다.
— 아 시노 코
9

현재 버전에서 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>
스 니펫 확장

— Mosh Feu
소스
변경 이벤트를 트리거하지 않고 어떻게 값을 설정할 수 있습니까? 변경 이벤트는 사용자가 값을 수동으로 변경할 때 사용되는 자체 이벤트 처리기를 트리거합니다.
— enumag
다른 옵션은 destroy플러그인을 다시 호출하는 것입니다. 업데이트 된 코드를 참조하십시오.
— Mosh Feu
원래 select2에 전달한 옵션을 가져 와서 복제 할 필요가 없습니까? 어쨌든이 솔루션은 해킹처럼 보입니다.
— enumag
물론입니다. 문서에 따른 공식적인 방법은 변경 이벤트를 트리거하는 것입니다. so that I wouldn't have to duplicate them왜 복제해야합니까? 당신이 할 때 destroy는 select그의 모든과가 아직 options.
— Mosh Feu
select2에 전달 된 옵션을 의미했습니다.$example.select2({ ... this ... })
— enumag
6

Ajax의 경우 $(".select2").val("").trigger("change"). 그러면 문제가 해결 될 것입니다.

— Sab
소스
6

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; }
});
— 아마드 타로 네
소스
이것은 효과가 있습니다. 그러나 버전 4.0에서는 더 이상 사용되지 않습니다.
— VisualBean
5

에서 선택 2 V.4

사용하다 $('selector').select2().val(value_to_select).trigger('change');

작동해야한다고 생각합니다

— 아카 쉬 샤르마
소스
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

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

— 누만 파탄
소스
2

Phan의 답변이 저에게 효과적이었습니다.

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

그러나 변경 사항을 추가하면 이벤트가 발생합니다.

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— 안드레스 로드리게스
소스
1
이렇게하면 "Uncaught TypeError : $ (...). select2 (...). change is not a function (…)"오류가 발생합니다. Select2 4.x 버전에서는 가능하지 않다고 생각합니다. 여기에는 ajax에서 아무것도 작동하지 않습니다.
— MC9000 2016
2

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

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

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

— 하미드 레자
소스
1

때때로, select2()먼저로드 될 것이고, 이로 인해 컨트롤이 이전에 선택한 값을 올바르게 표시하지 않게됩니다. 몇 초 동안 지연하면이 문제를 해결할 수 있습니다.

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

select2현재 선택 중 하나를 선택한 후 적용하는 것이 더 적절할 것 입니다.

— 메멧 알리 울루 산
소스
0

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
— 아지트 라 카니
소스
0

다음을 사용해야합니다.

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 클래식
소스
0

입력 상자를 사용하는 경우 값이 "true"인 "multiple"속성을 설정해야합니다. 예를 들면

<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

에는 원격 데이터로드 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

나와 같은 문제를 생각해 낸 다른 사람에게 추가하기 위해.

동적으로로드 된 옵션 (AJAX에서)의 선택된 옵션을 설정하려고 시도했으며 일부 논리에 따라 선택한 옵션 중 하나를 설정하려고했습니다.

내 문제는 이름과 일치하는 값이 아니라 값과 일치해야하는 ID를 기반으로 선택한 옵션을 설정하지 않았기 때문에 발생했습니다!

— Glen
소스
0

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

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

다음과 같이 번역됩니다.

$("#HouseIds").select2("val", [35293,49525]);
— 로버트 베니
소스
0

이것은 편집을 위해 데이터를로드하는 동안 AJAX에서 select2 데이터를로드하는 사람을 도울 수 있습니다 ( 단일 또는 다중 선택에 적용 가능 ).

내 양식 / 모델로드 중 :

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

호출하기 전에 ajax에서 값을 얻는 경우 

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
스 니펫 확장

jquery 함수를 사용하여 ajax 호출이 완료되었는지 확인합니다.

$.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.
    });
스 니펫 확장
여기에 설명 된대로 [ 모든 jQuery Ajax 요청이 완료 될 때까지 기다리시겠습니까?

— 빅터 므 왕기
소스
0

@tomloprod의 답변 위에 구축합니다. 당신이 사용하고 있는지 홀수 우연히 X-편집 및 선택 2 (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가 누군가를 도울 수 있기를 바랍니다.

— Renier
소스
0

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

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

Your_value 대신 원하는 값을 입력하세요.

희망이 작동합니다 :)

— 솔루션 정신
소스
-2

좋고 쉬운 :

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

그리고 id_city선택의 ID로 변경 합니다.

편집 : 글렌의 코멘트 후 나는 그것이 왜 그리고 어떻게 작동했는지 설명해야한다는 것을 깨달았습니다.

나는 select2내 양식에 대해 정말 멋지게 작업했습니다. 내가 할 수 없었던 유일한 것은 편집 할 때 현재 선택된 값을 표시하는 것뿐이었습니다. 타사 API를 검색하여 새 레코드를 저장하고 이전 레코드를 편집했습니다. 잠시 후 사용자가 필드를 변경하지 않으면 아무 일도 일어나지 않기 때문에 값을 올바르게 설정할 필요가 없다는 것을 깨달았습니다. 문제가있는 많은 사람들을 검색하고 찾아 본 끝에 순수 자바 스크립트로 만들기로 결정했습니다. 그것은 효과가 있었고 누군가를 돕기 위해 게시했습니다. 나는 또한 그것에 대한 타이머를 설정하는 것이 좋습니다.

— Bonafernando
소스
이 대답은 값을 올바르게 설정하지도 않는 끔찍한 해킹입니다.
— Glen
죄송합니다. 내가 게시 한 이유를 설명하기 위해 내 답변을 편집하겠습니다.
— bonafernando
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.