নির্বাচন 2 মানটি পুনরায় সেট করুন এবং স্থানধারক দেখান show


212

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

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});

উত্তর:


238

আপনি অবশ্যই নির্বাচন করা 2 হিসাবে সংজ্ঞায়িত করতে হবে

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

নির্বাচন 2 পুনরায় সেট করতে

$("#customers_select").select2("val", "");

7
আমি এটি <সিলেক্ট একাধিক> দিয়ে চেষ্টা করেছি, তবে আমি ত্রুটিটি পেয়েছি: <সিলেক্ট> উপাদানের সাথে সংযুক্ত থাকা অবস্থায় সিলেক্ট 2 এর জন্য বিকল্প 'initSelection' অনুমোদিত নয়।
সোরিন পোষ্টেলনিকু

14
এটি আমার পক্ষে কাজ করে না। স্থানধারকটি এখনও প্রদর্শিত হয় না।
বিসিআর

5
নীচে @ লেগো স্টর্মট্রোপারের উত্তর দেখুন, যা সিলেক্ট 2 এর এপিআই অনুসারে নতুন পদ্ধতিটি প্রতিফলিত করে। উপরের পদ্ধতিটি অবচয় করা হয়েছে।
ডেভিড

14
V4.0.3 হিসাবে, এটি .select2("val", "")আর কাজ করে বলে মনে হচ্ছে না।
আদমজ

30
$("#customers_select").val('').trigger('change') ;আমি এটি ব্যবহার করেছি এবং এটি কাজ করেছে।
অক্ষয় কুলকারনী

125

নির্বাচন 2 তাদের এপিআই পরিবর্তন করেছে:

নির্বাচন 2: select2("val")পদ্ধতিটি অবচয় করা হয়েছে এবং পরে সিলেক্ট 2 সংস্করণগুলিতে সরানো হবে। পরিবর্তে $ উপাদান.val () ব্যবহার করুন।

এখনই এটি করার সর্বোত্তম উপায় হ'ল:

$('#your_select_input').val('');

সম্পাদনা করুন: ডিসেম্বর 2016 মন্তব্যগুলি পরামর্শ দেয় যে নীচে এটি করার জন্য আপডেট উপায়:

$('#your_select_input').val([]);

135
এটি মানটি আপডেট করে তবে এটি সঠিকভাবে প্রদর্শন করার জন্য আপনাকে একটি পরিবর্তন ইভেন্টটি ট্রিগার করতে হবে। $('#your_select_input').val('').trigger('change')
সানিম

5
এটি আমার পক্ষে কাজ করে না। স্থানধারকটি এখনও প্রদর্শিত হয় না।
বিসিআর

3
এটি changeট্রিগার সংযোজন নিয়ে আমার পক্ষে কাজ করে , তবে আমরা ব্যবহার করছি যাচাইকরণের গ্রন্থাগারটিও ট্রিগার করে - আপাতত আমাকে হ্রাস করা সংস্করণ ব্যবহার করতে হবে।
ডেভ নিউটন

6
এটি সিলেক্ট ২.০.২ ব্যবহার করে সঠিকভাবে কাজ করে না। এটি নির্বাচনটি পুনরায় সেট করবে এবং স্থানধারকটিকে পুনরুদ্ধার করবে, কিন্তু যখন আমি একটি নতুন মান (পোস্ট পুনরায় সেট করা) চয়ন করি তখন আমি একটি "খালি স্ট্রিং" বিকল্পটিও দেখতে পেলাম (অর্থাত্ এতে একটি "এক্স" সহ একটি বাক্স)।
কৌনপিস

1
'(' # আপনার_সलेक्ट_ইনপুট ')। ভাল (' ')। ট্রিগার (' পরিবর্তন ') কেবলমাত্র প্লেসহোল্ডার সরবরাহ করা হলে কাজ করে। অন্যথায় খালি স্ট্রিং বিকল্পটি নির্বাচিত বিকল্প হিসাবে প্রদর্শিত হবে।
amol

115

গৃহীত উত্তর আমার ক্ষেত্রে কার্যকর হয় না। আমি এটি চেষ্টা করছি, এবং এটি কাজ করছে:

সিলেক্ট 2 সংজ্ঞায়িত করুন:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

অথবা

$("#customers_select").select2({
    placeholder: "Select a State"
});

পুনঃ স্থাপন করতে:

$("#customers_select").val('').trigger('change')

অথবা

$("#customers_select").empty().trigger('change')

2
আমি দেখতে পেয়েছি যে আপনার কাছে প্লেসোল্ডার সংজ্ঞায়িত না থাকলে অনুমতিটি ক্লিয়ার কাজ করে না
ড্যান ট্যাপিন

আমরাও $('#your_select_input').val('').trigger('change')না $('#your_select_input').val('');ফায়ারফক্স কাজ করে না
অ্যালেক্স আর্ট।

1
এটি আমার জন্য কাজ করে, এটি সিলেক্ট 2 যা আমি ভি 4.0.3 ব্যবহার করছি তা থেকে সমস্ত ডেটা মুছে ফেলে
ক্লিয়ারবথ

8
$ ("# গ্রাহক_সलेक्ट")। খালি ()। ট্রিগার ('পরিবর্তন') আমার পক্ষে কাজ করে। :)
মুন্না খান

1
'$ ("# গ্রাহক_সलेक्ट")। খালি ()। ট্রিগার (' পরিবর্তন ')' আমার পক্ষে কাজ করেছে, ধন্যবাদ!
তাহিরহান

52

আমার পক্ষে একমাত্র কাজটি হ'ল:

$('select2element').val(null).trigger("change")

আমি সংস্করণ 4.0.3 ব্যবহার করছি

উল্লেখ

সিলেক্ট 2 ডকুমেন্টেশন অনুযায়ী


2
আমি v4.0.3 ব্যবহার করছি এবং $('select2element').val("").trigger("change")খুব ভাল কাজ করছি ।
রাউবি

দয়া করে মনে রাখবেন যে আপনার <সিলেক্ট> এর ভিতরে আপনার অবশ্যই একটি ফাঁকা <ফাংশন> থাকতে হবে। আপনি select2 সঙ্গে Ajax ব্যবহার করে থাকেন, এই ইচ্ছার হেল্প এবং -। $ ( '# SelectFieldId') শুরুতে যোগ ( '<অপশনটি নির্বাচন করা = "নির্বাচিত"> </ বিকল্প>')
musicjerm

19

সিলেক্ট 2 সংস্করণ 4.0.9 সহ এটি আমার পক্ষে কাজ করে:

$( "#myselect2" ).val('').trigger('change');

1
এটি আমার সিলেক্ট 2 ড্রপডাউন ফাঁকা করে দিয়েছে। আমার জন্য কাজ করেছেন। ধন্যবাদ।
দিশা

18

সিলেক্ট 2 একটি নির্দিষ্ট সিএসএস ক্লাস ব্যবহার করে, তাই এটি পুনরায় সেট করার একটি সহজ উপায় হ'ল:

$('.select2-container').select2('val', '');

এবং আপনার যদি একই ফর্মটিতে একাধিক সিলেক্ট 2 থাকে তবে আপনার সমস্ত সুবিধা এই সমস্ত একক কমান্ডের সাথে পুনরায় তৈরি করা হবে ted



11

নির্বাচিত মূল্য অপসারণ করতে

$('#employee_id').select2('val','');

অপশন ভ্যালু সাফ করতে

$('#employee_id').html('');

1
ফিফে স্থানধারক পাঠ্য পুনরায় সেট করার জন্য জিজ্ঞাসা করছে। সুতরাং এই উত্তরটির প্রথম অংশটিই বৈধ।
nterms

2
হ্যাঁ এজন্য আমি উত্তরগুলির শিরোনাম হাইলাইট করি।
শঙ্কা এসএমএস

2
প্রথম উত্তরটি প্রকৃতপক্ষে> 4.0 থেকে আর প্রয়োগ করা হচ্ছে না। তবে দ্বিতীয় বিকল্পটি আমাকে বাঁচায়! আপনি সমাধান 2 সত্যই সাফ করতে চাইলে এটি সমাধান। 2। নির্বাচন করার জন্য কেবলমাত্র .val ('') সেট করা যথেষ্ট নয়। আপনার এইচটিএমএল সাফ করাও দরকার। অনেক ধন্যবাদ!!!
ওয়াজজা

8

আমি জানি এটি একটি পুরানো প্রশ্নের ধরণ, তবে এটি সিলেক্ট 2 সংস্করণ 4.0 এর জন্য কাজ করে

 $('#select2-element').val('').trigger('change');

অথবা

$('#select2-element').val('').trigger('change.select2'); 

আপনার যদি এর সাথে আবদ্ধ ইভেন্টগুলি পরিবর্তন করে থাকে


দুর্দান্ত সমাধান। সদ্য সংযুক্ত সিলেক্ট 2 বাক্সটিকে লক্ষ্য করতে আমার .last () ফাংশনটি যুক্ত করতে হয়েছিল। $('#select2-element').last().val('').trigger('change.select2');
ইনস্পার্বো

8

নির্বাচন 2 কনফিগার করতে নিম্নলিখিত ব্যবহার করুন

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

এবং নির্বাচন ইনপুট প্রোগ্রামিয়মে সাফ করতে

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

7

এটি সঠিক উপায়:

 $("#customers_select").val('').trigger('change');

আমি সিলেক্ট 2 এর সর্বশেষ প্রকাশটি ব্যবহার করছি।


6

প্রথমত আপনাকে অবশ্যই এর মতো সিলেক্ট 2 সংজ্ঞায়িত করতে হবে:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

সিলেক্ট 2 পুনরায় সেট করতে, কেবল আপনি নীচের কোড ব্লকটি ব্যবহার করতে পারেন:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

6

আপনি দ্বারা নির্বাচন সাফ করতে পারেন

$('#object').empty();

তবে এটি আপনাকে আপনার স্থানধারকের কাছে ফিরিয়ে দেবে না।

সুতরাং এটি একটি অর্ধ সমাধান


5

আমি উপরের সমাধানগুলি চেষ্টা করেছিলাম কিন্তু এটি আমার পক্ষে কার্যকর হয়নি।

এটি হ্যাক ধরনের, যেখানে আপনি পরিবর্তন ট্রিগার করতে হবে না।

$("select").select2('destroy').val("").select2();

অথবা

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});

5

ব্যবহারকারীদের দূরবর্তী ডেটা লোড করার জন্য এই Ajax বন্ধ অগ্নিসংযোগ ছাড়া স্থানধারক করার select2 পুনরায় সেট করবে। V4.0.3 এর সাথে কাজ করে:

$("#lstProducts").val("").trigger("change.select2");

আমার জন্য কাজ করেছে তবে আমার ট্রিগারটি কেবল 'পরিবর্তন' হয়েছিল
গ্রেগরি আর। সুদার্থ

এটিই একমাত্র সমাধান যা আমার পক্ষে এজাক্স ডেটা ব্যবহার করে অন্য একটি সিলেক্ট 2 থেকে একটি সিলেক্ট 2 পুনরায় সেট করতে কাজ করেছিল।
IlludiumPu36

5

সুতরাং, ফর্মটি পুনরায় সেট করতে আপনার কারও কাছে একটি রিসেট বোতাম থাকবে। স্ক্রিপ্ট ট্যাগের ভিতরে নিম্নলিখিত কোড যুক্ত করুন

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

অথবা কেবল কোনও স্থানধারক না রেখে নির্বাচিত ক্ষেত্রটি খালি করতে:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

3

জায়গা ধারক জন্য

$("#stateID").select2({
    placeholder: "Select a State"
});

একটি নির্বাচন 2 পুনরায় সেট করতে

$('#stateID').val('');
$('#stateID').trigger('change');

আশাকরি এটা সাহায্য করবে


2

এটি করার প্রস্তাবিত পদ্ধতি অনুসরণ করা। Https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my- স্থানধারক ডকুমেন্টেশনে পাওয়া গেছে (এটি মোটামুটি সাধারণ সমস্যা বলে মনে হচ্ছে):

এটি যখন ঘটে তখন এর অর্থ সাধারণত আপনার নিজের <option></option>মধ্যে প্রথম বিকল্প হিসাবে ফাঁকা থাকে না <select>

যেমন হিসাবে:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

2

আমারও এই সমস্যা ছিল এবং স্থানধারকটি পুনরায় সেট হওয়ার আগে এটি val(null).trigger("change");একটি No select2/compat/inputDataত্রুটি নিক্ষেপ থেকে ডেকে আনে। আমি ত্রুটিটি ধরা এবং সরাসরি স্থানধারককে সেট করে (একটি প্রস্থ সহ) সেট করে এটি সমাধান করেছি। দ্রষ্টব্য: আপনার যদি একের বেশি থাকে তবে আপনার প্রতিটিকে ধরতে হবে।

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

আমি সিলেক্ট ২.০.৩ চালাচ্ছি


দেখে মনে হচ্ছে changeইভেন্টটিতে আপনার শ্রোতা আবদ্ধ । ট্রিগার চেষ্টা করুন change.select2- এটি সীমাবদ্ধ শ্রোতাদের ট্রিগার করবে না ( github.com/select2/select2/issues/3620 দেখুন )।
পল

2

v.4.0.x হিসাবে ...

মান পরিষ্কার, কিন্তু এছাড়াও স্থানধারক ব্যবহার পুনঃস্থাপন ...

.html('<option></option>');  // defaults to placeholder

যদি এটি খালি হয় তবে এটি পরিবর্তে প্রথম বিকল্প আইটেমটি নির্বাচন করবে যা আপনি যা চান তা নাও হতে পারে

.html(''); // defaults to whatever item is first

খোলামেলাভাবে ... সিলেক্ট 2 হ'ল বাটে এমন ব্যথা, এটি আমাকে অবাক করে দেয় যা এটি প্রতিস্থাপন করা হয়নি।


1

আমি উপরের সমাধানগুলি চেষ্টা করেছি তবে কোনওটি 4x সংস্করণে কাজ করে নি।

আমি যা অর্জন করতে চাই তা হ'ল: সমস্ত বিকল্প সাফ করুন তবে স্থানধারকটিকে স্পর্শ করবেন না। এই কোডটি আমার পক্ষে কাজ করে।

selector.find('option:not(:first)').remove().trigger('change');

আপনি যদি সিলেক্টর.ফাইন্ড ব্যবহার করেন ('বিকল্প: নয় (: প্রথম)')। এইচটিএমএল (''); এটি কাজ করা উচিত.
ওয়াজজা

1

সিলেক্ট 2 সংস্করণ 3.2 ব্যবহার করে এটি আমার পক্ষে কাজ করেছে:

$('#select2').select2("data", "");

বাস্তবায়নের দরকার পড়েনি initSelection


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

1

এখানে প্রথম দশটি সমাধান চেষ্টা করার পরে এবং ব্যর্থ হওয়ার পরে, আমি কাজের এই সমাধানটি খুঁজে পেয়েছি (দেখুন "নীলোভ এপ্রিল 7 এপ্রিল মন্তব্য সম্পাদনা করেছেন" পৃষ্ঠাতে মন্তব্য করুন):

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

তারপরে পরিবর্তনটি করা হয়:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(লেখক মূলত দেখিয়েছেন var $select = $(this[1]);, কোন মন্তব্যকারী সংশোধন করেছেন var $select = $(this[0]);, যা আমি উপরে দেখিয়েছি))


1

আপনার js ফাইলে এই কোডটি ব্যবহার করুন

$('#id').val('1');
$('#id').trigger('change');

0

আপনি এটি ব্যবহার করে মান সাফ করার আগে $("#customers_select").select2("val", ""); পুনরায় সেট ক্লিকের উপর অন্য কোনও নিয়ন্ত্রণের দিকে মনোযোগ স্থাপনের চেষ্টা করুন।

এটি আবার স্থানধারকটি প্রদর্শন করবে।


0

ডিওএম ইন্টারফেস ইতিমধ্যে প্রাথমিক অবস্থার উপর নজর রাখে ...

সুতরাং নিম্নলিখিতগুলি করা যথেষ্ট:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

0

ভাল আমি যখনই করেছি

$('myselectdropdown').select2('val', '').trigger('change');

কিছু তিন থেকে চারটি ট্রিগার হওয়ার পরে আমি এক ধরণের ল্যাগ পেতে শুরু করি। আমি মনে করি একটি স্মৃতি ফাঁস আছে। এটি আমার কোডের মধ্যে নেই কারণ আমি যদি এই লাইনটি সরিয়ে ফেলি তবে আমার অ্যাপ্লিকেশনটি পিছিয়ে থাকবে।

যেহেতু আমার কাছে অনুমতিক্লিয়ার বিকল্পগুলি সত্যে সেট করা আছে, তাই আমি সাথে গিয়েছিলাম

$('.select2-selection__clear').trigger('mousedown');

এটি একটি $ ('মাইলেক্ট্রোড্রপডাউন') দ্বারা অনুসরণ করা যেতে পারে। সিলেক্ট 2 ('বন্ধ'); আপনি যদি ওপেন পরামর্শটি ড্রপ ডাউন বন্ধ করতে চান তবে সিলেক্ট 2 ডোম উপাদানটিতে ইভেন্ট ট্রিগার।


0

এটি করার একটি দুর্দান্ত উপায় (আমি এটি 4.0.0 সংস্করণে কাজ করতে দেখেছি):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • অনুমতিক্লেয়ারটি সত্যতে সেট করা আবশ্যক
  • একটি খালি বিকল্প নির্বাচন উপাদান থাকা আবশ্যক

0

আমার সমাধানটি হ'ল:

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.