বুটস্ট্র্যাপ মডেলে এম্বেড করার সময় সিলেক্ট 2 কাজ করে না


338

আমি যখন বুটস্ট্র্যাপ মডেলে একটি সিলেক্ট 2 (ইনপুট) ব্যবহার করি, তখন আমি এতে কিছু টাইপ করতে পারি না। এটা কি অক্ষম? মডেলের বাইরে সিলেক্ট 2 সূক্ষ্মভাবে কাজ করে।

এখানে চিত্র বর্ণনা লিখুন

কার্যকারী উদাহরণ: 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>

এবং জেএস:

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

উত্তর:

এখানে আপনি একটি দ্রুত সংশোধন করতে পারেন

এবং এখানে 'সঠিক উপায়ে': বুটস্ট্র্যাপ মডেলে এম্বেড করার সময় সিলেক্ট 2 কাজ করে না


1
তা হচ্ছে, উপাদান থেকে ট্যাবিনডেক্স = "- 1" গুণটি মুছে ফেলা হচ্ছে ।
নিকিত বড়োচিয়া

ডিবিসওয়েলের উত্তরটি সঠিক সমাধান, তবে মূলটি ডিভেরdropdownParent উপরে না হওয়া উচিত, তবে গভীরতর উদাহরণস্বরূপ modal-content, শ্রেণীর সাথে বিভাজন , অন্যথায় মোডাল স্ক্রোল করার সময় ড্রপডাউন অবস্থানগুলি বিশৃঙ্খলাবদ্ধ হয়।
শাহিন দোহান

উত্তর:


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

( মডেল থেকে ট্যাবিনডেক্স = "- 1" সরান )


22
অন্য কোন সমাধান হতে পারে? কারণ মডেল উইন্ডো তখন Esc কী দ্বারা বন্ধ হবে না।
woto

19
ট্যাবিনডেক্স = "- 1" সরিয়ে ফেলা আমার পক্ষে কাজ করেনি। আমি সবেমাত্র <ডি ক্লাস = "মডেল-বডি"> <ডি ক্লাস = "মডেল-বডি" স্টাইল = "ওভারফ্লো: লুকানো;">
উইসেম

39
তুমি কীভাবে আবিষ্কার করেছ?
ডন্টভোটমিউডাউন

6
আমি সমস্ত অপশন চেষ্টা করেছি, কিন্তু কিছুই আমার পক্ষে কার্যকর হয় না। আমি সিলেক্ট ২.০ ব্যবহার করছি
গিরিশ গুপ্ত

7
ধন্যবাদ! এটি 4 বছর হয়েছে এবং এটি এখনও একটি বৈধ ফিক্স।
লাইন্ক

248

সিলেক্ট 2 ভি 4 এর জন্য:

dropdownParentএইচটিএমএল বডি না হয়ে মডেল ডায়ালগটিতে ড্রপডাউন সংযুক্ত করতে ব্যবহার করুন ।

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

এটি সেক্টর 2 ড্রপডাউন সংযুক্ত করবে তাই এটি HTML বডি (ডিফল্ট) এর পরিবর্তে মডেলের ডোমের মধ্যে পড়ে। Https://select2.org/roddown#DPdown- placement দেখুন


12
নিশ্চিত করা হয়েছে, এটি একটি কবজির মতো কাজ করছে এবং এই সমস্যার সর্বোত্তম সমাধান বলে মনে হচ্ছে!
lacco

29
এটি আমার জন্য কাজ করেছিল (v4.0.2 সহ), তবে আমাকে ব্যবহার করতে হয়েছিল dropdownParent: $("#myModal"), না dropdownParent: "#myModal"
স্যাকসন ড্রুস

6
এফডাব্লুআইডাব্লু, আমার ক্ষেত্রে আমাকে মডেলটির শরীরে ড্রপডাউন প্যারেন্ট সেট করা দরকার ছিল, এটি মডেলের সাথে সংযুক্তি জেড-ইনডেক্সকে যথেষ্ট উচ্চতায় আনেনি। যেমন ড্রপডাউন পিতা: $ ('। মডেল-বডি', '# মাইমোডাল')
ড্রইউইনথাউন্টস

1
এটি tabindex অপসারণ ছাড়াই পুরোপুরি সূক্ষ্ম কাজ করে। +1
সমালোচিত

1
@ ড্র্রুআইনমাউন্টেনসগুলিতে আমারও মডেলের মূলকে সেট করার সমস্যা ছিল dropdownParent, শরীর পছন্দ করা আরও ভাল otherwise অন্যথায় আপনি যখন স্ক্রোলিং করছেন তখন সত্যিই খারাপ অবস্থানের বাগগুলি পাবেন। আমি ক্লাসের সাথে আমার ডিভিতে সেট করেছিলাম modal-contentএবং এটি একটি কবজির মতো কাজ করে!
শাহিন দোহান

193

আমি সিলেক্ট 2 এর জন্য গিথুব এ এর ​​একটি সমাধান পেয়েছি

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

বুটস্ট্র্যাপ 3 এর জন্য সমাধানটি হ'ল:

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

বুটস্ট্র্যাপ 4 enforceFocusপদ্ধতিটির নতুন নামকরণ করেছে _enforceFocus, সুতরাং পরিবর্তে আপনাকে এটি প্যাচ করতে হবে:

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

উপরের লিঙ্ক থেকে ব্যাখ্যা অনুলিপি করা হয়েছে:

বুটস্ট্র্যাপ শ্রোতাদের ফোকাসিন ইভেন্টে রেজিস্ট্রেশন করে যা ফোকাসিন উপাদানটি ওভারলে নিজেই হয় বা এর বংশধর কিনা তা পরীক্ষা করে - যদি তা না হয় কেবল ওভারলেটিকে অস্বীকার করে। সিলেক্টল 2 ড্রপডাউন দেহের সাথে সংযুক্ত হওয়ার সাথে এটি কার্যকরভাবে আপনাকে পাঠ্যক্ষেত্রের মধ্যে কোনও কিছু প্রবেশ করতে বাধা দেয়।

আপনি মডেলটিতে ইভেন্টটি নিবন্ধিত করে এমন প্রয়োগকারী ফোকাস ফাংশন ওভাররাইট করে এটি কুইকফিক্স করতে পারেন


1
@ পেইমারকো যে উত্তরটি বেছে নিতে একটু আগে সেখানে থাকা উচিত ছিল! সত্যিই বিরক্তিকর সমস্যার আসল উত্তর দেওয়ার জন্য ধন্যবাদ মানুষ,
ইল্টার

3
@pymarco এটি সঠিক সমাধান। আমার সময় বাঁচানোর জন্য আপনাকে ধন্যবাদ।
VKPRO

2
আপনি আমাকে এমন একটি সমস্যা দিয়ে অনেক সময় বাঁচিয়েছেন যা সর্বদা তার মাথা পিছনে দেয় না। ধন্যবাদ!
ব্যবহারকারী 3036342

1
এটি আমার জন্য কাজ করেছে !! আমি গিথুবে সিলেক্ট 2 এর জন্য ইস্যু থ্রেডগুলির মাধ্যমে ব্রাউজিং এবং ব্রাউজ করছিলাম এবং আপনি সরবরাহিত পোস্টটিতে প্রবেশ করিনি। এটি গুগল করছিল এবং এই পৃষ্ঠাটিকে স্ট্যাকওভারফ্লোতে সন্ধান করেছিল যা আমার জীবন বাঁচিয়েছিল। ধন্যবাদ!
luis.ap.uyen

2
আমি এই কোডটি কোথায় রেখেছি এবং এটির কোন ক্রিয়াকলাপের ঠিকানা দেওয়া উচিত? দুঃখিত, জেএস নুব এখানে, আমি এটিকে সিলেক্ট 2 জেএস এর একটি অংশ তৈরি করার চেষ্টা করেছি বা পৃষ্ঠার শীর্ষে / প্রান্তে রেখেছি, সব কিছুই সাফল্য ছাড়াই। $.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>

এটি কাজ করে কিন্তু যখন আমার দীর্ঘ মডেল থাকে আমি নীচে স্ক্রোল করতে পারি না!
তারেক কালাজি

1
@ তারেককালাজি আপনি কি কখনও এই সমাধান দিয়ে স্ক্রোলিংয়ের অনুমতি দেবেন তা বুঝতে পেরেছেন?
উপচে পড়া

ট্যাবিনডেক্স মুছে ফেলার চেষ্টা করেছিল কিন্তু কল্পনা করা হয়নি। ওভারফ্লো যুক্ত করা: লুকানো দরকারী যদি
মডেল

আমার জন্য ট্যাব সূচক বৈশিষ্ট্যটি সরানোর জন্য কাজ করেছেন।
গ্লেন

জাস্ট এফআইআই: ট্যাব-সূচক অ্যাটর্কে অপসারণ করা এসএস বাটন দ্বারা মডেল পপআপ বন্ধ করার ক্ষমতা সরিয়ে ফেলবে।
কৌতূহলবাই

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

এটি আমার নির্বাচিত ২.০.০. এর সমাধান সিলেক্ট ২ সিএসএস আমদানির ঠিক নীচে সিএসএস ওভাররাইড করুন। দয়া করে নিশ্চিত করুন যে আপনার ডায়ালগ বা মডেলের চেয়ে z- সূচকের চেয়ে বেশি। আমি কেবলমাত্র ডিফল্টগুলিতে 2000 যোগ করি। আমার ডায়লগগুলির জেড-ইনডেক্স প্রায় 1000 এর কারণ।


1
সমাধানগুলি সমাধানের জন্য এগুলি ব্যতীত ২.০.০ নির্বাচন করার জন্য কাজ করে নি। অনেক ধন্যবাদ.
নীল

যদি সিলেক্ট 2 (v4.0.0) পপওভারে থাকে তবে একই সমস্যা দেখা দেয়। ইন bootstrap.cssএর Z-সূচক .popover1060 সেট করা হয় তাই এই ফিক্স যেমন ভাল কাজ করে। আমি এটি পছন্দ করি কারণ এটি সহজ এবং এটি সমস্যাটি একইভাবে সমাধান করে যেমন সমস্যাটি তৈরি হয়েছিল: জেড-ইনডেক্সটি স্টাইল শীটে সেট করা।
পল

2
সবচেয়ে তুচ্ছ এখনও একমাত্র সমাধান যা কাজ করেছিল। ধন্যবাদ!
ইশতিয়াক খান

আমি আমার সিএসএস ফাইলে উপরেরটি যুক্ত করেছি, তবে এর কোনও পরিবর্তন নেই। আমি jQuery মোবাইল ব্যবহার করছি। কোন পরামর্শ দয়া করে?
সাহিল খান্না

@ সাহিল 1. নিশ্চিত করুন যে এটি সফলভাবে আসলগুলি ওভাররাইড করেছে। সমস্ত ডিফল্ট সিএসএস ফাইলের পরে সহজ উপায় এটি যুক্ত করা হয় 2 z-সূচি পরীক্ষা করুন, ডায়ালগের চেয়ে বড় এটি নিশ্চিত করুন
দিলুকা ডব্লু

26

ড্রপডাউনপেন্ট সেট করুন। আমাকে এটি সেট করতে হয়েছিল। মোডাল বা টেক্সটটি কেন্দ্রের মধ্যে অন্তর্ভুক্ত হবে al

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

2
.modal-contentসত্যিই একটি পার্থক্য করতে। Poin
জেএস লিম

এটি আমার পক্ষে কাজ করেছে। আমি কেন এত উত্সাহ পেলাম না তা ভাবছি।
chrisbjr

আমার জন্য কাজ করেছেন এছাড়াও ধন্যবাদ
নেহা

11

আমার জন্য কাজ করা উত্তরটি এখানে পাওয়া গেছে: https://github.com/select2/select2-bootstrap-theme/issues/41

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

এছাড়াও অপসারণ প্রয়োজন হয় না tabindex


এটি সর্বোত্তম উপায়, মডেল থেকে সমস্ত কার্যকারিতাও বজায় রাখে।
এডোফ্রে

9

অফিসিয়াল সিলেক্ট 2 ডকুমেন্টেশন অনুসারে এই সমস্যাটি ঘটে কারণ বুটস্ট্র্যাপ মডেলগুলি মডেলের বাইরে অন্য উপাদানগুলির থেকে ফোকাস চুরি করে।

ডিফল্টরূপে সিলেক্ট 2 ড্রপডাউন মেনুটিকে উপাদানটিতে সংযুক্ত করে এবং এটি "মডেলের বাইরে" হিসাবে বিবেচিত হয়।

পরিবর্তে ড্রপডাউন প্যারেন্ট সেটিংয়ের সাথে মডেলটিতেই ড্রপডাউনটি সংযুক্ত করুন:

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

রেফারেন্স দেখুন: https://select2.org/troublesh ૂટ/ common-problems


ভাল. এটি দুর্দান্ত পপআপ নিয়ে কাজ করছে না, এখন ড্রপডাউন প্যারেন্ট বিকল্পটি যুক্ত করার পরে এটির কাজ ঠিক আছে।
যোগেশ সরোয়া

8

আমার একই সমস্যা ছিল, আপডেট করার z-indexজন্য .select2-containerকৌশলটি করা উচিত। আপনার z-indexমডেলগুলি সিলেক্ট 2-এর চেয়ে কম কিনা তা নিশ্চিত করুন ।

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

আপডেট করা হয়েছে: উপরের কোডটি সঠিকভাবে কাজ না করে, আপনার মডেল থেকে ট্যাবইন্ডেক্সগুলিকে @ ব্রেকেক প্রস্তাবিত হিসাবে সরিয়ে ফেলুন


1
এটি কার্যকর করার জন্য আপনাকে @ ব্রেকের উত্তর দিয়ে এটি বাস্তবায়ন করতে হবে।
রায়ান সংক্ষিপ্ত

7

ডকুমেন্ট.রেড () এ এই কোডটি ব্যবহার করুন

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

1
সঠিক ফাংশনটির নাম "$ (নথি)। প্রস্তুত"। সুতরাং কোডটি এর মতো হওয়া উচিত: $ (নথি) (ডিআর (ফাংশন () {$ .fn.modal.Constructor.prototype.enforFocus = ফাংশন () {};});
লেচ ওসিওস্কি

1
@ লেচোসিওস্কি - কোডটির এই সামান্য অংশটি কীভাবে ব্যবহার করবেন তা বর্ণনা করার জন্য আপনাকে ধন্যবাদ। আপনার সমাধানটি একমাত্র আমার পক্ষে কাজ করেছে। +1
ফ্রান্সিস বার্টকোয়িয়াক

7

এই সমস্যাটি আমার জন্য একক জ্যাকারি ফাংশনটির জন্য কাজ করে

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

ধন্যবাদ! এটি আমার সমস্যার সমাধান করেছে
মিহাই আলেকজান্দ্রু-আইওনট

5

সিলেক্ট 2 সিএসএস ফাইল পরিবর্তন করুন

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 এবং নির্বাচন করুন 3.4.0)। আমার কাছে অন্যটির উপরে দুটি জিকুরি ইউআই ডায়ালগ রয়েছে এবং দ্বিতীয়টিতে দুটিতে সিলেক্ট করুন। এছাড়াও আমি jQuery UI কথোপকথনে সিলেক্ট 2, তারিখ এবং সময় পিকারের কথোপকথনকে অনুমতি দিয়েছি $ .ui.dialog.prototype._allowInteration = ফাংশন (e) {রিটার্ন !! $ (e.target)। ক্লোজস্ট ('। Ui- ডায়ালগ, .ui-তারিখপিকার, .সलेक्ट 2-ড্রপ ') দৈর্ঘ্য; }; এই সাহায্য না করে আমার কোনও ধারণা নেই।
অ্যাড্রিয়ান পি।

5

ট্যাবিনডেক্স উপাদানগুলি গৃহীত উত্তর সম্পূর্ণ করতে কীভাবে কাজ করে তা আরও ভালভাবে বুঝতে:

ট্যাবিনডেক্স গ্লোবাল অ্যাট্রিবিউট হ'ল একটি পূর্ণসংখ্যা নির্দেশ করে যা উপাদানটি ইনপুট ফোকাস নিতে পারে (ফোকাসযোগ্য), যদি এটি ক্রমিক ক্রমিক কীবোর্ড নেভিগেশনে অংশ নেওয়া উচিত, এবং যদি তাই হয় তবে কোন অবস্থানে। এটি বেশ কয়েকটি মান গ্রহণ করতে পারে:
  - নেতিবাচক মানটির অর্থ উপাদানটি ফোকাসযোগ্য হওয়া উচিত, তবে ক্রমিক কীবোর্ড নেভিগেশনের মাধ্যমে পৌঁছানো উচিত নয়;
  -0 এর অর্থ হল যে উপাদানটি ক্রমবর্ধমান কীবোর্ড নেভিগেশনের মাধ্যমে ফোকাসযোগ্য এবং পৌঁছনীয় হওয়া উচিত, তবে এর আপেক্ষিক ক্রম প্ল্যাটফর্ম কনভেনশন দ্বারা সংজ্ঞায়িত করা হয়েছে;
  - একটি ধনাত্মক মান মানে ক্রমবর্ধমান কীবোর্ড নেভিগেশন মাধ্যমে ফোকাসযোগ্য এবং পৌঁছনীয় হওয়া উচিত; এর আপেক্ষিক ক্রমটি গুণকের মান দ্বারা সংজ্ঞায়িত করা হয়: ক্রমবর্ধমান ট্যাবিনডেক্সের ক্রমবর্ধমান সংখ্যা অনুসরণ করে। যদি বেশ কয়েকটি উপাদান একই ট্যাবিনডেক্সটি ভাগ করে, তাদের আপেক্ষিক আদেশ নথিতে তাদের আপেক্ষিক অবস্থান অনুসরণ করে।

থেকে: মজিলা ডিভলপার নেটওয়ার্ক


3

আপনার সাথে একটি সমস্যা আছে আইপ্যাড কীবোর্ড যা লুকাতে বুটস্ট্র্যাপ মোডাল যখন এ ক্লিক 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

@ পাইমার্কো উত্তরের ভিত্তিতে আমি এই সমাধানটি লিখেছি, এটি নিখুঁত নয় তবে সিলেক্ট 2 ফোকাস সমস্যাটি সমাধান করে এবং মডেলের অভ্যন্তরে কাজ করে ট্যাব ক্রম বজায় রাখে

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

আমার ক্ষেত্রে দুটি মডেলের সাথে আমার একই সমস্যা ছিল এবং এটি ব্যবহার করে সমস্ত সমাধান করা হয়েছিল:

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

ঠিক আছে, আমি জানি আমি পার্টিতে দেরি করেছি। তবে আমার জন্য কী কাজ করেছে তা আপনার সাথে ভাগ করে নিতে দিন। ট্যাবিনডেক্স এবং জেড-ইনডেক্স সমাধানগুলি আমার পক্ষে কার্যকর হয়নি।

নির্বাচিত উপাদানটির পিতামাতাকে সেট করা সিলেক্ট 2 সাইটে তালিকাভুক্ত সাধারণ সমস্যা অনুসারে কাজ করেছে ।


1

আপনি jquery মোবাইল পপআপ ব্যবহার করেন আপনাকে _ হ্যান্ডল ডকুমেন্ট ফোকাস ইন ফাংশনটি আবার লিখতে হবে:

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


আমি jQuery মোবাইল ব্যবহার করছি এবং একটি পপআপে নির্বাচন 2 এম্বেড করেছি। আপনার দেওয়া কোডটি পিসি ব্রাউজারে ভাল কাজ করে। তবে আমি যখন এই মোবাইলটি কোনও ব্রাউজারে এই কোডটি চালিত করি তখন কোনও মান নির্বাচন করা হলে পপআপটি বন্ধ হয়ে যায় এবং আবার খোলে। আমার কি পরিবর্তন করা দরকার?
সাহিল খান্না

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

আমার একটি আবেদনে একটি আধা-সম্পর্কিত সমস্যা ছিল তাই আমি আমার 2 সি রেখে দেব।

আমার সিলেক্ট 2 উইজেটযুক্ত ফর্মগুলি সহ একাধিক মডেল রয়েছে। মোডাল এ খোলার পরে মোডাল এ এর ​​অন্য একটি মডেল, মোডাল বি এর ভিতরে সিলেক্ট উইজেটগুলি অদৃশ্য হয়ে যায় এবং আরম্ভ করতে ব্যর্থ হয়।

এই মোডালগুলির প্রত্যেকটিই ফর্মগুলি আজাক্সের মাধ্যমে লোড করছিল।

সমাধানটি ছিল কোনও মডেল বন্ধ করার সময় ডোম থেকে ফর্মগুলি সরিয়ে ফেলা।

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

1
$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

1

আমি আমার প্রকল্পে সাধারণত select2ফাংশন ওভারলোড করে এটি সমাধান করেছি। এখন এটি ড্রপডাউন প্যারেন্ট নেই কিনা এবং যদি ফাংশনটি এমন কোনও উপাদানটির জন্য কল করা হয় যা টাইপের পিতামাতা থাকে তা পরীক্ষা করে দেখাবে div.modal। যদি তা হয় তবে এটি ড্রপডাউনটির পিতামাতার হিসাবে সেই মডেলটি যুক্ত করবে।

এইভাবে, প্রতিবার আপনি একটি সিলেক্ট-ইনপুট-বাক্স তৈরি করার সময় আপনাকে এটি নির্দিষ্ট করতে হবে না।

(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

আমি কেবল এটি সিলেক্ট.মিন.এসএসএস সহ কাজ করে যাচ্ছি

চেষ্টা করে দেখুন

বুটস্ট্র্যাপ 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

সার্ভার-সাইড (এজাক্স বা জসন ডেটা ইনলাইন) সহ বুটস্ট্র্যাপ 4.0.০ ব্যবহার করতে, আপনাকে এই সমস্তগুলি যুক্ত করতে হবে:

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

এবং তারপরে মোডাল খোলা থাকলে, সিলেক্ট 2 তৈরি করুন:

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