จะกำหนดค่าที่เลือกของ jquery select2 ได้อย่างไร?


107

นี่เป็นของรหัสก่อนหน้า 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 การเข้าถึงแบบเป็นโปรแกรมไม่ทำงานกับสิ่งนี้


คุณควรจะสามารถกำหนดค่าที่เลือกใน html หรือใช้$("#programid").val()
Explosion Pills

@ExplosionPills Negative ฉันพยายามด้วยเช่นกันฉันก็ได้ค่าว่างเปล่า ฉันจะใช้ programid.val () ได้อย่างไร? ฉันได้รับค่าจากเซิร์ฟเวอร์จากนั้นฉันต้องตั้งค่าลงในฟิลด์ที่ซ่อนอยู่ของ select2
ClearB ทั้ง

@ClearBoth ไม่แน่ใจว่าฉันเข้าใจว่าคุณหมายถึงอะไร คุณกำลังพยายามตั้งค่า "ที่เลือก" ของคอมโพเนนต์ Select2 เป็นหนึ่งในผลลัพธ์ที่ดึง AJAX หรือไม่?
An Phan

@ อันพันธ์ใช่มีวิธีทำมั้ย?
ClearB ทั้ง

@ClearBoth มี. ตรวจสอบคำตอบของฉันด้านล่าง
An Phan

คำตอบ:


67

ในการตั้งค่า "ที่เลือก" ของคอมโพเนนต์ 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


1
ฉันพยายามโดยใช้ id เท่านั้น select2 ('val', '1') แต่ไม่ได้ผลขอบคุณ
ClearBoth

6
วิธีนี้ได้ผลเพียงต้องการทราบว่าใน select2 ใหม่ "a_key" คือ "ข้อความ" ในออบเจ็กต์ select2 มาตรฐาน ดังนั้น: {id: 100, text: 'Lorem Ipsum'}
NoobishPro

2
เหมือนกันที่นี่บน v4 โดนดึงผมออกจากอันนี้ ฉันไม่คิดว่าจะเป็นไปได้โดยไม่ต้องไปที่โซลูชัน JavaScript กำลังมองหา jQuery / Bootstrap Select2 แบบเลื่อนลงตอนนี้ (2 วันของการเล่นซอทุกวิธีที่เป็นไปได้ - ไม่มีความสุข!)
MC9000

32
Select2 v4: $('#inputID').val(100).trigger('change') ดูselect2.github.io/…
พอล

@NoobishPro & An Phan - ขอบคุณสำหรับคำตอบและความคิดเห็น
Sinto

120

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

หากคุณใช้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.2


สำหรับselect2 v4คุณสามารถผนวกตัวเลือก / 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');

5
ทริกเกอร์ ('เปลี่ยน'); เป็นส่วนสำคัญ
mihkov

$ ("# mySelect2"). select2 ("val", "0") - สิ่งนี้จะทริกเกอร์เหตุการณ์ jquery ของการเปลี่ยนแปลงค่า วิธีป้องกันไม่ให้เกิดขึ้น โดยปกติเมื่อผู้ใช้ส่งแบบฟอร์มหลังจากเสร็จสิ้นฉันจะรีเซ็ตข้อมูลแบบฟอร์มทั้งหมด รีเซ็ตจะไม่รีเซ็ต select2. การใช้ select2 ("val", "0") จะทำให้เกิดการเปลี่ยนแปลงที่บ้าคลั่งโดยไม่มีการดำเนินการใด ๆ จากผู้ใช้
jumper rbk


1
ได้รับการยกย่องสำหรับ. ท
ริกเกอร์

1
@tomloprod มันใช้งานได้เหมือนมีเสน่ห์ .... thx
Vishal Parmar

25

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


2
วิธีการตั้งค่าด้วยข้อความแทนที่จะเป็นวาล
Rizwan Patel

คำถามคือจะทำอย่างไรหลังจากโหลดด้วยการโทร AJAX คำตอบนี้ใช้ไม่ได้ในกรณีนี้
MC9000

สิ่งนี้จะทริกเกอร์การเปลี่ยนแปลงค่า select2 ซึ่งจะแปลกหากคุณมีเหตุการณ์นี้ในการประมวลผลและมันถูกทริกเกอร์โดยที่ผู้ใช้ไม่ได้ทำ
jumper rbk

18

ตามที่ฉันลองเมื่อใช้ 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 และคุณสามารถตั้งค่าใหม่ด้วยปุ่ม


ฉันใช้ 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


var $ option = $ ("<option selected> </option>") .val ('1'). text ("เลือกฉัน"); $ ('# select_id'). ผนวก ($ option) .trigger ('เปลี่ยน');
Jigz

ขอบคุณ. ยืนยันว่าใช้งานได้กับเวอร์ชัน 4.0.0 (ajax call)
khalil

ยืนยันความสำเร็จอีกครั้งในเวอร์ชัน 4 ด้วย ajax
coder

หากคุณใช้กล่องที่สามารถค้นหาได้ด้วย ajax นี่เป็นทางออกที่เหมาะสม อันนี้ใช้ได้กับฉันในเดือนมิถุนายน 2019
Eric Skiff

12

ฉันทำแบบนี้ -

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

2
โปรดให้คำอธิบายเพื่อช่วยให้ผู้ใช้เข้าใจว่าโค้ดของคุณทำงานอย่างไรและเพื่อตอบคำถามของ OP
Ivan

@ อิวานฉันทำแบบนี้$ ("# drpServices"). val ("0"); ซึ่งจะไม่เลือก taxt ในเมนูแบบเลื่อนลง select2 เนื่องจากมีผลต่อทั้งค่าและข้อความเราต้องการฟังก์ชันการเปลี่ยนแปลงทริกเกอร์ของ 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>


ฉันจะตั้งค่าโดยไม่เรียกใช้เหตุการณ์เปลี่ยนแปลงได้อย่างไร เหตุการณ์การเปลี่ยนแปลงทริกเกอร์ตัวจัดการเหตุการณ์ของฉันเองซึ่งมีไว้สำหรับเมื่อผู้ใช้เปลี่ยนค่าด้วยตนเอง
enumag

อีกทางเลือกหนึ่งคือdestroyเรียกใช้ปลั๊กอินอีกครั้ง .. ดูรหัสที่อัปเดตแล้ว ..
Mosh Feu

มีวิธีรับตัวเลือกที่ฉันเคยส่งผ่านไปยัง select2 เพื่อที่ฉันจะได้ไม่ต้องทำซ้ำหรือไม่? อย่างไรก็ตามวิธีนี้ดูเหมือนแฮ็คมากกว่า
enumag

รับรองว่าฮาแน่ ๆ วิธีที่เป็นทางการตามเอกสารคือการเรียกเหตุการณ์การเปลี่ยนแปลง so that I wouldn't have to duplicate themทำไมต้องทำซ้ำ? เมื่อคุณทำยังคงมีกับเขา destroyselectoptions
Mosh Feu

ฉันหมายถึงตัวเลือกที่ผ่านไปยัง$example.select2({ ... this ... })
select2

7

ฉันคิดว่าคุณต้องการ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





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

ฉันแก้ปัญหาของฉันด้วยรหัสง่ายๆนี้ โดย #select_location_id คือ ID ของกล่องที่เลือกและค่าคือค่าของตัวเลือกที่แสดงรายการในกล่อง select2


2

คำตอบของ An 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

2

คุณสามารถใช้รหัสนี้:

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

โดยที่ 2 ใน "number: 2" และ 3 ใน "number: 3" คือฟิลด์ id ในอาร์เรย์ออบเจ็กต์


1

บางครั้งselect2()จะโหลดก่อนและนั่นทำให้ตัวควบคุมไม่แสดงค่าที่เลือกไว้ก่อนหน้านี้อย่างถูกต้อง การหน่วงเวลาไว้สักครู่สามารถแก้ปัญหานี้ได้

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

1

หากคุณได้รับค่าของคุณจาก ajax ก่อนโทร

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

ยืนยันว่าการโทร ajax เสร็จสมบูรณ์โดยใช้ฟังก์ชัน jquery เมื่อ

$.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 ทั้งหมดจะเสร็จสิ้น?


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

0

หากคุณใช้ช่องป้อนข้อมูลคุณต้องตั้งค่าคุณสมบัติ "หลาย" ด้วยค่าเป็น "จริง" ตัวอย่างเช่น,

<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 ซึ่งต้องตรงกับค่าไม่ใช่ค่าที่ตรงกับชื่อ!


0

สำหรับหลายค่ามีดังนี้:

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

ซึ่งจะแปลเป็นแบบนี้

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

0

สิ่งนี้อาจช่วยให้ใครบางคนโหลดข้อมูล 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

เพื่อสร้างคำตอบของ @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 จะช่วยใครสักคนได้



-3

ดีและง่าย:

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

และคุณเปลี่ยนid_cityเป็นรหัสที่คุณเลือก

แก้ไข: หลังจากความคิดเห็นของ Glen ฉันรู้ว่าฉันควรอธิบายว่าทำไมและทำงานอย่างไรสำหรับฉัน:

ฉันselect2ทำงานได้ดีมากสำหรับฟอร์มของฉัน สิ่งเดียวที่ฉันไม่สามารถทำงานได้คือการแสดงค่าที่เลือกในปัจจุบันเมื่อแก้ไข กำลังค้นหา API ของบุคคลที่สามบันทึกใหม่และแก้ไขบันทึกเก่า หลังจากนั้นไม่นานฉันก็รู้ว่าฉันไม่จำเป็นต้องตั้งค่าให้ถูกต้องมีเพียงป้ายกำกับด้านในช่องเท่านั้นเพราะถ้าผู้ใช้ไม่เปลี่ยนช่องก็จะไม่มีอะไรเกิดขึ้น หลังจากค้นหาและมองหาผู้คนจำนวนมากที่มีปัญหากับมันฉันตัดสินใจใช้ Javascript ล้วนๆ มันได้ผลและฉันโพสต์เพื่อช่วยใครบางคน ฉันขอแนะนำให้ตั้งเวลาสำหรับมันด้วย


คำตอบนี้เป็นการแฮ็กที่น่ากลัวซึ่งไม่สามารถกำหนดค่าได้อย่างถูกต้อง
Glen

ฉันขอโทษเกี่ยวกับเรื่องนั้น ฉันจะแก้ไขคำตอบเพื่ออธิบายว่าทำไมฉันจึงโพสต์
bonafernando
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.