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

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

select2 plugin

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

 

معرفی چند پلاگین کاربردی جاوااسکریپت

dropify :

دراپی فای یکی از پلاگین هایی بود که وقتی باهاش کار کردم خیلی لذت بردم و استایل و امکان فوق العاده ای به وب سایت و فرم های شما میده تا هرچه بیشتر کاربرپسندتر باشه.

میتوانید پلاگین رو از وب سایتش دانلود و استفاده کنید.

dropify plugin

croppie :

croppie یک پلاگین فوق العاده برای کراپ کردن تصاویر با آپشن های زیاد برای مدیریت راحتتر است. توی وب سایت croppie با مشاهده داکیومنت ان به راحتی میتوانید از آن استفاده کنید.

croppie image

 

JQuery Location Picker plugin – google map :

در صورتیکه قصد دارید نقشه گوگل را در پروژه و یا وبسایت خود نمایش دهید و به کاربر این امکان را دهید که موقعیت خود را مشخص نمایید و همچنین شاید در قالب فرمی ارسال کنید می توان از این پلاگین استفاده کرد.

مشاهده مثالهای jquery location picker  ، دانلود و مشاهده پلاگین در گیت هاب

icheck :

با استفاده از این پلاگین میتوانید به راحتی دیزاین فرم های وب سایت خود را به صورت زیبا و کاربرپسند طراحی کنید.

icheck

برای دانلود و مشاهده  نمونه ها و نحوه استفاده وب سایت http://icheck.fronteed.com/ را مشاهده نمائید. و یا در
گیت هاب
از آن استفاده نمائید.

bootstrap select :

با استفاده از این پلاگین به راحتی میتوانید تگ های select خود را استایل دهی زیبایی کنید و رابط کاربری وب سایت خود را بهتر و زیباتر کنید.

selectpicker

میتوانید نمونه select هایی که با این پلاگین میتوان ایجاد کرد را در وبسایتش و در منوی example مشاهده نمایید.

برای تغییر استایل هم میتوانید کدهای زیر رو به استایل پروژه خود اضافه کنید :

.bootstrap-select .btn {
    background-color    : #fff;
    font-weight         : 300;
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option{
    text-align: right !important;
}
.bootstrap-select .dropdown-menu {
    margin: 15px 0 0;
}
select::-ms-expand {
    /* for IE 11 */
    display: none;
}

bootstrap-colorselector

در برخی از پروژه ها، نیاز به فرم هایی است که کاربر رنگهایی را در وب سایت انتخاب نماید، این پلاگین برای من بسیار جذاب و کاربردی بود.

bootstrap color selector

دانلود  bootstrap color selector