Select2 ไม่ทำงานเมื่อฝังใน modal bootstrap


338

เมื่อฉันใช้ select2 (อินพุต) ใน bootstrap modal ฉันไม่สามารถพิมพ์อะไรลงไปได้ มันเหมือนคนพิการเหรอ? นอก modal select2 ทำงานได้ดี

ป้อนคำอธิบายรูปภาพที่นี่

ตัวอย่างการทำงาน: http://jsfiddle.net/byJy8/1/ รหัส:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

และ js:

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

คำตอบ:

ที่นี่คุณสามารถค้นหาวิธีแก้ไขด่วน

และนี่คือ 'วิธีที่ถูกต้อง': Select2 ไม่ทำงานเมื่อฝังใน modal bootstrap


1
นั่นคือลบแอตทริบิวต์tabindex = "- 1"จากองค์ประกอบ
Nikit Barochiya

คำตอบของ dboswellคือทางออกที่ถูกต้อง แต่dropdownParentไม่ควรอยู่บน root div แต่ลึกกว่าเช่น div กับ class modal-contentมิฉะนั้นตำแหน่งดรอปดาวน์จะสับสนเมื่อเลื่อนโมดอล
Shahin Dohan

คำตอบ:


606

ตกลงฉันต้องทำให้มันใช้งานได้

เปลี่ยนแปลง

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

ถึง

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

(ลบ tabindex = "- 1"จากคำกริยา)


22
อาจจะมีวิธีอื่นได้หรือไม่ เนื่องจากหน้าต่างโมดัลจะไม่ปิดด้วยปุ่ม Esc
woto

19
remove tabindex = "- 1" ไม่ได้ทำงานกับฉัน ฉันเพิ่งเปลี่ยน <div class = "modal-body"> เป็น <div class = "modal-body" style = "ล้น: hidden;">
Wissem

39
คุณค้นพบสิ่งนั้นได้อย่างไร
DontVoteMeDown

6
ฉันได้ลองตัวเลือกทั้งหมดแล้ว แต่ไม่มีอะไรที่เหมาะกับฉัน ฉันใช้ select2 4.0
Girish Gupta

7
ขอบคุณ! เป็นเวลา 4 ปีแล้วและยังคงเป็นวิธีแก้ไขที่ถูกต้อง
Linek

248

สำหรับ Select2 v4:

ใช้dropdownParentเพื่อแนบดรอปดาวน์เข้ากับกล่องโต้ตอบโมดอลแทนที่จะเป็นเนื้อหา HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

สิ่งนี้จะแนบดรอปดาวน์ Select2 เพื่อให้มันอยู่ภายใน DOM ของ modal มากกว่ากับเนื้อหา HTML (ค่าเริ่มต้น) ดูhttps://select2.org/dropdown#dropdown-placement


12
ยืนยันว่านี่ใช้งานได้ดีและดูเหมือนจะเป็นทางออกที่ดีที่สุดสำหรับปัญหานี้!
lacco

29
นี้ทำงานให้ฉัน (กับ V4.0.2) แต่ผมใช้ไม่ได้dropdownParent: $("#myModal") dropdownParent: "#myModal"
Saxon Druce

6
FWIW ในกรณีของฉันฉันจำเป็นต้องตั้งค่าแบบเลื่อนลงพาเรนต์ไปยังเนื้อหาของคำกริยาการแนบกับโมดอลเองไม่ได้นำดัชนี z ขึ้นมาสูงพอ เช่น dropdownParent: $ ('. modal-body', '#myModal')
DrewInTheMountains

1
มันทำงานได้อย่างสมบูรณ์แบบโดยไม่ต้องลบ tabindex +1
sammry

1
@DrewInTheMountains ฉันยังมีปัญหาในการตั้งค่าที่dropdownParentรูทของคำกริยามันดีกว่าที่จะเลือกร่างกายไม่เช่นนั้นคุณจะได้รับข้อบกพร่องการวางตำแหน่งที่ไม่ดีเมื่อเลื่อน ฉันตั้งค่าของฉันให้กับ div ด้วยคลาสmodal-contentและมันใช้งานได้อย่างมีเสน่ห์!
Shahin Dohan

193

ฉันพบวิธีแก้ปัญหานี้ใน gitHub สำหรับ select2

https://github.com/ivaynberg/select2/issues/1436

สำหรับ bootstrap 3 การแก้ปัญหาคือ:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 เปลี่ยนชื่อenforceFocusวิธีการเป็น_enforceFocusดังนั้นคุณจะต้องแก้ไขมันแทน:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

คัดลอกคำอธิบายจากลิงก์ด้านบน:

Bootstrap จะลงทะเบียนผู้ฟังไปยังเหตุการณ์ focusin ซึ่งจะตรวจสอบว่าองค์ประกอบที่โฟกัสนั้นเป็นภาพซ้อนทับของตัวเองหรือสืบทอดมาจากส่วนใดของภาพหากไม่เพียงแค่ปรับโฟกัสไปที่ภาพซ้อนทับ ด้วย dropdown Select2 ที่ติดอยู่กับตัวเครื่องสิ่งนี้จะช่วยป้องกันไม่ให้คุณป้อนสิ่งใด ๆ ลงในฟิลด์ข้อความ

คุณสามารถแก้ไขได้อย่างรวดเร็วโดยการเขียนทับฟังก์ชั่น enforceFocus ซึ่งลงทะเบียนเหตุการณ์บนโมดัล


1
@ pymarco นั่นควรจะอยู่ที่นั่นก่อนหน้านี้สักหน่อยเพื่อรับเป็นคำตอบ! ขอบคุณชายที่ให้คำตอบที่แท้จริงให้กับปัญหาที่น่ารำคาญจริงๆ
ilter

3
@pymarco นี่คือทางออกที่ถูกต้อง ขอบคุณที่ช่วยประหยัดเวลาของฉัน
VKPRO

2
คุณช่วยฉันประหยัดเวลาด้วยปัญหาที่ไม่ได้อยู่ข้างหลังหัวเสมอไป ขอบคุณ!
user3036342

1
สิ่งนี้ใช้ได้สำหรับฉัน !! ฉันกำลังเรียกดูและเรียกดูผ่านหัวข้อปัญหาสำหรับ select2 ใน github และไม่พบในโพสต์นั้น มันเป็น googling และค้นหาหน้านี้ใน stackoverflow สิ่งที่ช่วยชีวิตฉัน ขอบคุณ!
luis.ap.uyen

2
ฉันจะใส่รหัสนี้จากที่ใดและควรใช้ฟังก์ชันใด ขออภัย JS noob ที่นี่ฉันพยายามทำให้นี่เป็นส่วนหนึ่งของ select2 JS หรือวางไว้ที่ด้านบน / ท้ายของหน้าทั้งหมดไม่ประสบความสำเร็จ $.fn.modal.Constructor.prototype.enforceFocus = $.noop;
Armitage2k

39

เพียงลบtabindex="-1"และเพิ่มสไตล์overflow:hidden

นี่คือตัวอย่าง:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

มันใช้งานได้ แต่เมื่อฉันมี modal ยาวฉันไม่สามารถเลื่อนลงมาได้!
Tarek Kalaji

1
@TarekKalaji คุณเคยคิดวิธีอนุญาตให้เลื่อนด้วยโซลูชันนี้หรือไม่?
โอเวอร์โฟล

พยายามลบแท็บเท็กซ์ แต่ไม่เพียงพอ การเพิ่มโอเวอร์
โฟลว์

ทำงานสำหรับฉันลบแอตทริบิวต์ดัชนีแท็บ
เกลน

เพียงแค่ FYI: การลบแท็บดัชนี attr จะลบความสามารถในการปิดป๊อปอัพ modal โดยปุ่ม esc
อยากรู้อยากเห็นบอย

31
.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

นี่คือโซลูชันของฉันที่มี select2 4.0.0 เพียงแทนที่ css ด้านล่างของ select2.css ที่นำเข้า โปรดตรวจสอบให้แน่ใจว่าดัชนี z มีค่ามากกว่ากล่องโต้ตอบหรือโมดอลของคุณ ฉันเพิ่งเพิ่ม 2000 บนค่าเริ่มต้น ทำให้ดัชนี z กล่องโต้ตอบของฉันมีค่าประมาณ 1,000


1
ไม่มีวิธีแก้ปัญหาใดที่ทำงานได้กับ select2 4.0.0 ยกเว้นสิ่งนี้ ขอบคุณมาก.
Neel

ปัญหาเดียวกันนี้เกิดขึ้นหาก Select2 (v4.0.0) อยู่ใน popover ในbootstrap.cssz-index ของ.popoverถูกตั้งค่าเป็น 1,060 ดังนั้นการแก้ไขนี้จึงใช้ได้เช่นกัน ฉันชอบเพราะมันเรียบง่ายและแก้ปัญหาได้ในลักษณะเดียวกับที่ปัญหาถูกสร้างขึ้น: z-index กำหนดในสไตล์ชีท
Paul

2
วิธีแก้ปัญหาเพียงเล็กน้อยที่สุดที่ทำงานได้ ขอบคุณ!
Ishtiaque Khan

ฉันได้เพิ่มข้างต้นในไฟล์ css ของฉัน แต่มันไม่มีการเปลี่ยนแปลง ฉันใช้ jQuery Mobile ข้อเสนอแนะโปรด?
Sahil Khanna

@Sahil 1. ตรวจสอบให้แน่ใจว่าสำเร็จแล้วแทนที่ไฟล์เดิม วิธีง่ายๆคือการเพิ่มนี้หลังจากทั้งหมด CSS เริ่มต้น files2.check Z-ดัชนีให้แน่ใจว่ามันมีขนาดใหญ่กว่าโต้ตอบ
Diluka W

26

ตั้งค่า dropdownParent ฉันต้องตั้งค่าใน. modal-content ภายในโมดอลหรือข้อความจะจบลงที่กึ่งกลาง

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

2
.modal-contentจริงๆสร้างความแตกต่าง ขอบคุณที่ชี้ให้เห็น👍
Js Lim

สิ่งนี้ใช้ได้สำหรับฉัน ฉันสงสัยว่าทำไมสิ่งนี้ถึงไม่ได้มีผู้โหวตมากนัก
chrisbjr

ทำงานให้ฉันด้วยขอบคุณ
Neha

11

คำตอบที่ใช้ได้สำหรับฉันพบได้ที่นี่: https://github.com/select2/select2-bootstrap-theme/issues/41

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

tabindexยังไม่จำเป็นต้องลบ


นี่เป็นวิธีที่ดีที่สุดนอกจากนี้ยังป้องกันไม่ให้การทำงานทั้งหมดเป็นกิริยาช่วย
Edofre

9

ตามเอกสารประกอบ select2 อย่างเป็นทางการปัญหานี้เกิดขึ้นเนื่องจาก Modals Bootstrap มีแนวโน้มที่จะขโมยโฟกัสจากองค์ประกอบอื่น ๆ นอกเหนือจาก Modal

โดยค่าเริ่มต้น Select2 จะแนบเมนูดร็อปดาวน์เข้ากับองค์ประกอบและถือว่าเป็น "นอกโมดอล"

แนบ dropdown เข้ากับ modal แทนด้วยการตั้งค่า dropdownParent:

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

ดูการอ้างอิง: https://select2.org/troubleshooting/common-problems


ดี. มันไม่ทำงานกับป๊อปอัปอันงดงามตอนนี้หลังจากเพิ่มตัวเลือก dropdownParent มันทำงานได้ดี
Yogesh Saroya

8

ฉันมีปัญหาเดียวกันการปรับปรุงz-indexสำหรับ.select2-containerควรทำเคล็ดลับ ตรวจสอบให้แน่ใจว่า modal ของคุณz-indexต่ำกว่า select2

.select2-container {
    z-index: 99999;
}

อัปเดต: ในกรณีที่โค้ดด้านบนทำงานไม่ถูกต้องให้ลบ tabindexes ออกจาก modal ของคุณตามที่ @breq แนะนำ


1
คุณต้องใช้สิ่งนี้ด้วยคำตอบ @breq เพื่อให้สามารถใช้งานได้
Ryan Arief

7

Jus ใช้รหัสนี้ใน Document.read ()

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

1
ชื่อฟังก์ชั่นที่เหมาะสมคือ "$ (เอกสาร). Ready" ดังนั้นรหัสควรเป็นเช่น: $ (document). Ready (function () {$ .fn.modal.Constructor.prototype.enforceFocus = function () {};});
Lech Osiński

1
@ LechOsiński - ขอบคุณที่อธิบายวิธีใช้โค้ดอันน้อยนิดนี้ ทางออกของคุณคือสิ่งเดียวที่ใช้ได้ผลสำหรับฉัน +1
Francis Bartkowiak

7

ปัญหานี้ Sloved ทำงานให้ฉันฟังก์ชั่น Jquery เดียว

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

5

เปลี่ยนไฟล์select2.css

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

ถึง

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

นั่นเป็นสิ่งเดียวที่ใช้ได้ผลกับฉัน (jquery-ui-1.10.3.css, jquery-ui-1.9.1.js และ select2 3.4.0) ฉันมี jQuery UI 2 กล่องโต้ตอบหนึ่งกล่องอยู่ด้านบนอีกกล่องหนึ่งและเลือก 2 ในกล่องที่สอง นอกจากนี้ฉันยังได้ใส่ // อนุญาตการโต้ตอบ select2 วันที่และเวลาบนกล่องโต้ตอบ jQuery UI $ .ui.dialog.prototype._allowInteraction = function (e) {return !! $ (e.target) .closest ('. ui- กล่องโต้ตอบ. ui-datepicker, .select2-drop '). length; }; ฉันไม่รู้ว่ามันช่วยได้หรือเปล่า
Adrian P.

5

เพียงเพื่อให้เข้าใจได้ดีขึ้นว่าองค์ประกอบของ tabindex ทำงานอย่างไรเพื่อให้ได้คำตอบที่ได้รับการยอมรับ:

แอ็ตทริบิวต์ tabindex global เป็นจำนวนเต็มที่ระบุว่าองค์ประกอบสามารถรับอินพุตโฟกัส (สามารถโฟกัสได้) ถ้ามันควรมีส่วนร่วมในการนำทางคีย์บอร์ดตามลำดับและหากเป็นเช่นนั้นจะอยู่ที่ตำแหน่งใด อาจมีค่าได้หลายค่า:
  -a ค่าลบหมายความว่าองค์ประกอบควรโฟกัสได้ แต่ไม่ควรเข้าถึงได้ผ่านการนำทางด้วยแป้นพิมพ์ตามลำดับ
  -0 หมายความว่าองค์ประกอบควรจะสามารถโฟกัสได้และเข้าถึงได้ผ่านการนำทางคีย์บอร์ดตามลำดับ แต่ลำดับที่สัมพันธ์กันของมันถูกกำหนดโดยการประชุมแพลตฟอร์ม
  - ค่าบวกหมายถึงควรสามารถโฟกัสได้และเข้าถึงได้ผ่านการนำทางด้วยคีย์บอร์ด ลำดับที่สัมพันธ์กันของมันถูกกำหนดโดยค่าของแอ็ตทริบิวต์: ลำดับตามจำนวนที่เพิ่มขึ้นของ tabindex หากองค์ประกอบหลายรายการใช้ tabindex เดียวกันลำดับที่สัมพันธ์กันของพวกเขาจะติดตามตำแหน่งที่สัมพันธ์กันในเอกสาร

จาก: Mozilla Devlopper Network


3

หากคุณมีปัญหากับการที่iPadแป้นพิมพ์ที่ซ่อนกิริยาบูตขณะที่คลิกที่Select2อินพุตคุณสามารถแก้ปัญหานี้โดยการเพิ่มกฎต่อไปนี้หลังจากการเริ่มต้นของselect2การป้อนข้อมูล:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

นำมาจากhttps://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

แก้ไข:หากตัวเลือกของคุณไม่แสดงอย่างถูกต้องคุณต้องใช้dropdownParentแอตทริบิวต์เมื่อเริ่มต้นselect2:

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

โชคดี (:


3

จาก @pymarco คำตอบที่ฉันเขียนวิธีนี้มันไม่สมบูรณ์ แต่แก้ปัญหาการโฟกัส select2 และรักษาลำดับแท็บที่ทำงานภายใน modal

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
                this.$element.trigger('focus')
            }
        }, this))
    }

3

ในกรณีของฉันฉันมีปัญหาเดียวกันกับสอง modals และทั้งหมดได้รับการแก้ไขโดยใช้:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

เช่นเดียวกับในโครงการ# 41ผู้ใช้กล่าวว่า


2
$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

รหัสนี้ใช้งานได้ ขอบคุณ.


2

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

การตั้งค่าพาเรนต์ขององค์ประกอบที่เลือกทำงานตามปัญหาทั่วไปที่ระบุไว้ในไซต์ select2


1

หากคุณใช้ป๊อปอัป jquery mobile คุณต้องเขียนฟังก์ชัน _handleDocumentFocusIn อีกครั้ง:

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
  if ($(e.target).closest('.select2-dropdown').length) return true;
}


ฉันใช้ jQuery Mobile และฝัง Select2 ในป๊อปอัป รหัสที่คุณให้ใช้งานได้ดีบนเบราว์เซอร์พีซี แต่เมื่อฉันเรียกใช้รหัสนี้บนเบราว์เซอร์มือถือป๊อปอัปจะปิดและเปิดใหม่เมื่อเลือกค่าใด ๆ คุณช่วยแนะนำการเปลี่ยนแปลงที่ฉันต้องการได้ไหม?
Sahil Khanna

1

ฉันมีปัญหาเดียวกันกับselect2ในbootstrap modalและวิธีการแก้ไขคือการลบoverflow-y: auto;และoverflow: hidden; จาก.modal-openและ.modal classes

นี่คือตัวอย่างของการใช้jQueryเพื่อลบoverflow-y:

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

1

ฉันมีปัญหานี้มาก่อนฉันใช้ yii2 และฉันแก้ไขมันด้วยวิธีนี้

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

1

ฉันมีปัญหากึ่งเกี่ยวกับในแอปพลิเคชันดังนั้นฉันจะใส่ใน 2c ของฉัน

ฉันมีหลายรูปแบบที่มีวิดเจ็ต select2 การเปิด modal A จากนั้น modal อื่นใน modal A จะทำให้ widgets select2 ใน modal B หายไปและไม่สามารถเริ่มต้นได้

แต่ละ modals เหล่านี้กำลังโหลดแบบฟอร์มผ่าน ajax

ทางออกคือการลบแบบฟอร์มจาก Dom เมื่อปิดคำกริยา

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});


1

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

ด้วยวิธีนี้คุณไม่จำเป็นต้องระบุทุกครั้งที่คุณสร้าง select2-input-box

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

0

ฉันเพิ่งทำให้มันทำงานโดยรวมselect2.min.css

ลองเลย

html modal ของฉันของ bootstrap 3 คือ

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>


0

ในการใช้ bootstrap 4.0 กับฝั่งเซิร์ฟเวอร์ (ajax หรือ json data inline) คุณต้องเพิ่มทั้งหมดนี้:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

และเมื่อโมดอลเปิดขึ้นให้สร้าง select2:

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

-1

ในกรณีของฉันฉันทำสิ่งนี้และมันใช้งานได้ ฉันใช้มัดเพื่อโหลดมันและในกรณีนี้มันใช้งานได้สำหรับฉัน

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.