دریافت مقدار انتخاب شده select

برای یکی از پروژه هایی که قبلا توسعه می‌دادم نیاز به ساخت یک فیلتر آجاکسی بر روی لیستی از دیتاها بود که وقتی کاربر بر روی select کلیک میکرد مقدار موردنظر با آجاکس ارسال و جستجو انجام میشد در واقع بروزرسانی مقادیر تگ select باید انجام می‌شد.

$('select.selectronFilter').on('change', function(){
    var selected    = $(this).find("option:selected").val();
});

با استفاده از کد فوق به راحتی می‌تونیم مقدار option مورد نظر از select  رو برگردونیم و با استفاده از API که ایجاد کردیم مقادیر مورد نظر را نمایش دهیم.

اما مساله ای که مطرح است اینه که اگر ما چندین select داشته باشیم و مقدار دومی وابسته به مقدار انتخابی اولی باشد و سومی نیز وابسته به مقدار انتخابی دومی و … باشد. برای مثال وقتی کشور را انتخاب می‌کنیم استان/ایالت های آن کشور و وقتی استان/ایالت را انتخاب کردیم شهرهای آن استان/ایالت نمایش داده می‌شود.

انتخاب مقدار تگ select و بروزرسانی داده با Ajax

در صورتیکه از AJAX استفاده کنیم بعد از انتخاب کشور مقادیر استان/ایالت را برمیگردانیم و داخل select مورد نظر نمایش میدهیم. همه چیز به درستی کار میکنه ولی وقتی از Bootstrap Select یا Select 2 استفاده می‌کنیم برای اینکه دیزاین کاربرپسندی داشته باشیم قضیه به همینجا ختم نمیشه!

قبلا در رابطه با برخی پلاگین‌های کاربردی جاوا اسکریپت مطلبی نوشتم که می‌توانید با برخی از پلاگین‌های کاربردی آشنا شوید و در پروژه های خود از آنها استفاده کنید.

همانطور که میدانیم این دو پلاگینی که معرفی کردم ( ‌Bootsrap Select , Select 2 ) هر دو با استفاده از JavaScript  مقادیری option را داخل یکسری تگ html دیگر قرار می‌دهند تا ظاهری که زیبا است را نمایش دهند چرا که بر روی تگ select نمیتوان استایل css اعمال کرد و محدودیت دارد!

وقتی مقادیر را دریافت میکنیم و آنها را داخل select قرار میدهیم باید آن را رفرش کنیم تا مقادیر جدید جایگزین شوند.

مثال زیر را مشاهده کنید، مقادیر را دریافت و تگ‌های ‌‌option ایجاد و مقادیر داخل آنها قرار داده میشوند و در نهایت داخل select قرار میگیرند، بعد از اینکار باید پلاگین استفاده شده را رفرش کنیم تا داده های جدید قرارگیرند.

$.ajax({
    url           : 'url',
    type         : 'POST',
    data        : formData,
    contentType   : false,
    processData   : false,
    success: function(response) {

        var arrOption = new Array();
        arrOption += "<option value=''>انتخاب موضوع</option>";

        $.each( response, function( key, value ) {
          arrOption += "<option value='" + key + "'>"+ value +"</option>";
        });

        $('select[name=example]').html(arrOption);
        $('select[name=example]').selectpicker('refresh');
    }
});

پلاگین Bootstrap Select :

در صورتیکه از پلاگینBootstrap Select استفاده کنیم به صورت زیر پلاگین را رفرش میکنیم و مقادیر جدید قرار داده می‌شوند. ( متدهای پلاگین )

$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});

پلاگین select2 :

در صورتیکه از پلاگین select2 استفاده می‌کنید به صورت زیر اقدام می‌کنیم: ( متدهای پلاگین )

$(".js-programmatic-set-val").on("click", function () {
    $example.val("CA").trigger("change");
});