it-swarm.dev

إعادة تعيين قيمة select2 وإظهار عنصر نائب

كيف يمكنني تعيين العنصر النائب على إعادة تعيين القيمة بواسطة select2. في المثال الخاص بي إذا تم النقر فوق مربعات تحديد المواقع أو التقدير وكانت قيمة select2 الخاصة بي لها قيمة يجب أن تتم إعادة تعيينها وإظهار العنصر النائب الافتراضي. يقوم هذا البرنامج النصي بإعادة تعيين القيمة ولكنه لن يعرض العنصر النائب

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

يجب عليك تحديد select2 كـ

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

لإعادة تعيين select2

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

لقد حدد Select2 API الخاصة بهم:

Select2: تم إهمال طريقة select2("val") وستتم إزالتها في الإصدارات Select2 اللاحقة. استخدم $ element.val () بدلاً من ذلك.

أفضل طريقة للقيام بذلك الآن هي:

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

تحرير: ديسمبر 2016 تشير التعليقات إلى أن أدناه هي الطريقة المحدثة للقيام بذلك:

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

الإجابة المقبولة لا تعمل في حالتي. أحاول ذلك ، وهو يعمل:

حدد select2:

$("#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')
85
NorthCat

الشيء الوحيد الذي يمكن أن يعمل بالنسبة لي هو:

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

أنا أستخدم الإصدار 4.0.3

المرجع

وفقًا لوثائق Select2

36
M.Tae

يستخدم Select2 فئة CSS محددة ، وبالتالي فإن الطريقة السهلة لإعادة ضبطها هي:

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

ولديك ميزة إذا كان لديك عدة Select2 في نفس النموذج ، سيتم إعادة تعيين كل منهم مع هذا الأمر واحد.

15
Marcio Mazzucato

استخدم هذا :

$('.select').val([]).trigger('change');
14
Sachin Gend

لإزالة القيمة المختارة

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

إلى قيم الخيار واضح

$('#employee_id').html('');
10
Shanka SMS

أعرف أن هذا نوع من الأسئلة القديمة ، لكن هذا يعمل مع الإصدار select2 4.0

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

أو

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

إذا كان لديك تغيير الأحداث المرتبطة به

7
Sean

أولاً ، يجب عليك تحديد select2 مثل هذا:

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

لإعادة تعيين select2 ، يمكنك ببساطة استخدام رمز الكود التالي:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");
5
Mahmut Aydın

استخدم التالي لتكوين select2

    $('#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");
4
Zabith Rafeek

هذه هي الطريقة الصحيحة:

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

أنا أستخدم أحدث إصدار من Select2.

4
TreeZ

يمكنك مسح اختيار te من قبل

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

لكن ذلك لن يعيدك إلى العنصر النائب الخاص بك.

لذلك هو حل نصف

4
Rodrigo Butta

بالنسبة للمستخدمين الذين يقومون بتحميل البيانات عن بُعد ، هذا سيعيد تعيين select2 إلى العنصر النائب دون إيقاف تشغيل ajax. يعمل مع v4.0.3:

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

جربت الحلول المذكورة أعلاه لكنها لم تنجح بالنسبة لي.

هذا هو نوع من الاختراق ، حيث لم يكن لديك لتحريك التغيير.

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

أو

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

اتباع الموصى بها طريقة للقيام بذلك. وجدت في الوثائق https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (يبدو أن هذه مشكلة شائعة إلى حد ما ):

عندما يحدث هذا ، فهذا يعني عادة أنه ليس لديك <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
fmsf

كنت أواجه هذه المشكلة أيضًا وهي تنبع من val(null).trigger("change"); throw رمي خطأ 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);

أنا أشغل Select2 4.0.3

2
Aba

بدءًا من الإصدار v.4.0.x ...

لمسح القيم ، ولكن أيضًا استعادة استخدام العنصر النائب ...

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

إذا كان فارغًا ، فسيحدد عنصر الخيار الأول بدلاً من ذلك والذي قد لا يكون هو ما تريده

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

بصراحة ... Select2 هو مثل هذا الألم في المؤخر ، يدهشني أنه لم يتم استبداله.

1
mangonights

لصاحب المكان

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

لإعادة تحديد 2

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

أتمنى أن يساعدك هذا

1
Rinto George

باستخدام select2 الإصدار 3.2 هذا يعمل بالنسبة لي:

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

لا تحتاج إلى تطبيق initSelection

1
shak

لقد حاولت الحلول المذكورة أعلاه ولكن لا شيء يعمل مع الإصدار 4x.

ما أريد تحقيقه هو: مسح جميع الخيارات ولكن لا تلمس العنصر النائب. هذا الرمز يعمل بالنسبة لي.

selector.find('option:not(:first)').remove().trigger('change');
1
R. Canser Yanbakan

بعد تجربة الحلول العشرة الأولى هنا والفشل ، وجدت هذا الحل للعمل (انظر "nilov علق في 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]); ، والتي أظهرها أعلاه.)

0
guero64

استخدم هذا الرمز في ملف js الخاص بك

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

واجهة DOM ، تقوم بالفعل بتتبع الحالة الأولية ...

القيام بما يلي يكفي:

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

الحل الخاص بي هو:

$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');
    });
0
Daniel Ortegón
$('myselectdropdown').select2('val', '0')

حيث 0 هي القيمة الأولى من القائمة المنسدلة

0
Momaad Jamshed Alam

حسنا كلما فعلت

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

بدأت في الحصول على نوع من التأخر بعد ثلاثة إلى أربعة مشغلات. أفترض أن هناك تسرب للذاكرة. ليس ضمن الكود الخاص بي لأنه إذا قمت بإزالة هذا السطر ، فلن يتأخر تطبيقي.

نظرًا لأنني سمحت بتعيين خيارات ClearClear على true ، فقد ذهبت معها

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

يمكن أن يتبع ذلك $ ("myselectdropdown"). select2 ('close')؛ تشغيل الحدث على عنصر select2 دوم في حال كنت تريد إغلاق الاقتراح المفتوح المنسدل.

0
Akhilesh Balachandder

قبل أن تمسح القيمة باستخدام هذا $("#customers_select").select2("val", ""); ، جرِّب ضبط التركيز على أي عنصر تحكم آخر عند النقر فوق إعادة التعيين.

سيُظهر هذا العنصر النائب مرة أخرى.

0
user2243380

إحدى الطرق المتطرفة للقيام بذلك (رأيتها تعمل للإصدار 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClear يجب أن يكون مضبوط على true
  • يجب أن يوجد خيار فارغ في عنصر التحديد
0
Ellery Newcomer

أفعل هذا في هذه الحالة:

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();
  1. يمكنني تغيير قيمة التحديد إلى فارغة
  2. يمكنني إزالة الحاوية ل select2
  3. إعادة الاتصال select2
0
Scramble

لا أعلم ما إذا كان أي شخص آخر قد عانى من هذا ، ولكن بمجرد أن تضرب الشفرة المشغل ('تغيير') توقفت جافا سكريبت لي فقط ، ولم تعد مطلقًا من المشغل ، ولم يتم تنفيذ باقي الوظيفة مطلقًا.

أنا لست على دراية بما فيه الكفاية مع jquerys الزناد أن أقول أن هذا هو متوقع في لا. حصلت حولها من خلال لفها في setTimeout ، قبيحة ولكنها فعالة.

0
rgvtim