Yazılım Notları
Bilgi Paylaştıkça Çoğalır...

Mutiple Select2 de Select2 Değerini Seçildiği Sırada Elde Etmek

Bootstrap kontroller yeni nesil web uygulamalarında yoğun olarak kullanılmakta. Select2 de bunlardan birisi. Select2 nin muhteşem özelliklerinden birisi de çoklu seçim yapabileceğiniz bir dropdownlist kontrolü olması. Ancak, çoklu seçimlerinizi seçim yapış sırasına göre nasıl elde edersiniz? Bunun için alternatif bir çözüm

Diyelim ki uygulamanızda bir Select2 DropDownList var. Bu açılır listede çoklu seçim yapmak istiyorsunuz. Bunun için BootStrap templatelerini kullanarak, DropDownList kontrolünüzün css'ini "Select2me" olarak set etmeniz yeterli. Ayrıca, siz bu açılır listede aynı anda çoklu seçim yapmak istiyorsanız bu kontrolün property'lerine multiple="" eklemeniz yeterli olacaktır. Artık, search yapabildiğiniz, çoklu seçim yapabildiğiniz muhteşem bir açılır listeniz oldu.

Sorun bu noktada ortaya çıkıyor. Aslında sorun değil belki ama, yeni bir özelliğe ihtiyacınız var. O da, çoklu seçim yaptığınızda, Select2 açılır listesinin sizin seçim sıranıza göre veriyi depolamasını istiyorsunuz diyelim. Benim böyle bir şeye ihtiyacım oldu ve web te yaptığım araştırmalarda ihtiyacımı karşılayacak bir çözüm bulamadım. O yüzden alternatif bir çözüm geliştirdim. Şöyle ki:

  1. Öncelikle sayfanızda bir tane HiddenField Oluşturun.
  2. Bu HiddenField şu şekilde olsun: <input type='Hidden' id='HiddenField' value='' />
  3. Açılır listenizin adı Select2KontrolAdi ise, jQuery ve BootStrap kütüphanelerini sayfanıza ekleyerek, bu açılır listenin  onchange eventine KontrolAdi.change() ile erişebilirsiniz. 
  4. Açılır listenizin değeri her değiştiğinde, HiddenField value güncellenir.
  5. HiddenField Başlangıçta boş olacağı için Length değeri 0(sıfır) olacaktır. Bu nedenle ilk mantıksal sınama bunun için yapılmıştır.
  6. HiddenField Deperi boş değilse, ya select2 kontrolünün değerinin uzunluğundan kısadır (bu durumda, hiddenfielda yeni bir seçim eklenecek demektir), ya da uzundur (bu durumda, select2 kontrolünde daha önce seçim yapılmış bir option çıkarılacaktır.)
  7. Bu iki duruma göre de mantıksal sınamalar yapıldıktan sonra, son değerler HiddenField value'da güncellenir. 
$('#Select2KontrolAdi').change(function () {
var CurList = $('#HiddenField).val();
        var SelectedList = $('#Select2KontrolAdi).val();


        if (CurList.length == 0) {
            CurList = '[' + SelectedList + ']';
            $('#HiddenField').val(CurList);
        }
        else 
        {
            if (SelectedList != null) {
                var CurListArray = CurList.toString().split(',');
                var SelectedListArray = SelectedList.toString().split(',');

                if (CurListArray.length < SelectedListArray.length) {
                    for (var i = 0; i < SelectedListArray.length; i++) {
                        if (CurList.indexOf('[' + SelectedListArray[i] + ']', 0) == -1) {
                            CurList += ',[' + SelectedListArray[i] + ']';
                        }
                    }
                }

                if (CurListArray.length > SelectedListArray.length) {

                    var SelectedListSearcable = "";
                    for (var i = 0; i < SelectedListArray.length; i++) {
                        SelectedListSearcable += '[' + SelectedListArray[i] + '],';
                    }
                    SelectedListSearchable = SelectedListSearcable
                                             .substr(0, SelectedListSearcable.length - 1);
                    for (var j = 0; j < CurListArray.length; j++) {
                        if (SelectedListSearchable.indexOf(CurListArray[j]) == -1) {
                            CurList = CurList.toString().replace(CurListArray[j] + ',', '');
                        }
                    }
                }
            }
            else {
                CurList = '';
                $('#HiddenField).val('');
            }

        }
        $('#HiddenField').val(CurList);
    });


 

 
Similar Articles

Banka Hesap Numaralarınızı, IBAN Numaralarınızı bir kere telefonunuza kaydedin. İhtiyaç duyduğunuzda elinizin altında olsun.

Banka Hesaplarım

En Güzel Sözler Uygulaması İçin


En Çok Rating Alanlar
Ana Sayfa       Arama       Valid CSS!