Select2MultiDropDown

Select2MultiDropDown.js

$(document).ready(function() {

    $.fn.select2.defaults.set("theme","bootstrap");

    function DDsetState($element, $state){
        $element.select2('val', null);
        if($state === true){
            $element.prop("disabled", false);
        }else{
            $element.prop("disabled", true);
        }
    }

    //State County City, Dropdown
    function DDSelect2($DD_primary, $DD_second, $DD_third){
        var $DD_primary = $($DD_primary);
        var $DD_second = $($DD_second);
        var $DD_third = $($DD_third);

        $DD_primary.closest('.input-group').addClass('select2-bootstrap-prepend');
        $DD_second.closest('.input-group').addClass('select2-bootstrap-prepend');
        $DD_third.closest('.input-group').addClass('select2-bootstrap-prepend');

        $DD_primary.select2({
            placeholder: {
                id: '', // the value of the option
                text: 'Select...'
            },
            allowClear:true,
            minimumResultsForSearch: 10,
            initSelection : function (element, callback) {
                $settings = {id:'',name:'Select...'};
                option = $('<option></option>').text($settings.name).val('');
                option.appendTo(element);
                $optionDefault = {
                    id:$settings.id,
                    text:$settings.name
                };
                $optionSelected = {};
                if(element.data('ajax-value')){
                    $settings = element.data('ajax-value');
                    option = $('<option></option>').text($settings.name).val($settings.id).attr('selected', true);
                    option.appendTo(element);

                    $optionSelected.id = $settings.id;
                    $optionSelected.text = $settings.name;
                }else{
                    $DD_second.prop("disabled", true);
                }
                $options = $.extend({}, $optionDefault, $optionSelected);
                callback($options);
            },
            ajax: {
                url: $DD_primary.data('ajax-route'),
                type: "GET",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    var $queryParams = {};
                    $.each($DD_primary.data('ajax-route-params'), function(index, value) {
                        $queryParams[index] = value;
                    });
                    //$queryParams['id'] = 1;
                    $queryParams['search'] = params.term;
                    return $queryParams;
                },
                processResults: function (data) {
                    var results = [];
                    $.each(data, function(index, item){
                        results.push({
                            id: item.id,
                            text: item.name
                        });
                    });
                    return {
                        results: results
                    };
                }
            }
        }).on("change", function() {
            console.log('1:'+$DD_primary.val());
            if($DD_primary.val() === ''){
                DDsetState($DD_second, false); console.log('disable:2');
                DDsetState($DD_third, false); console.log('disable:3');
            }else{
                DDsetState($DD_second, true); console.log('enable:2');
            }
        });

        if($DD_second.length){
            $DD_second.select2({
                placeholder: {
                    id: '', // the value of the option
                    text: 'Select...'
                },
                allowClear:true,
                minimumResultsForSearch: 10,
                initSelection : function (element, callback) {
                    $settings = {id:'',name:'Select...'};
                    option = $('<option></option>').text($settings.name).val('');
                    option.appendTo(element);
                    $optionDefault = {
                        id:$settings.id,
                        text:$settings.name
                    };
                    $optionSelected = {};
                    if(element.data('ajax-value')){
                        $settings = element.data('ajax-value');
                        option = $('<option></option>').text($settings.name).val($settings.id).attr('selected', true);
                        option.appendTo(element);

                        $optionSelected.id = $settings.id;
                        $optionSelected.text = $settings.name;
                    }else{
                        $DD_third.prop("disabled", true);
                    }
                    $options = $.extend({}, $optionDefault, $optionSelected);
                    callback($options);
                },
                ajax: {
                    url: $DD_second.data('ajax-route'),
                    type: "GET",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        var $queryParams = {};
                        if($DD_second.data('ajax-route-params')){
                            $.each($DD_second.data('ajax-route-params'), function(index, value) {
                                $queryParams[index] = value;
                            });
                        }
                        $queryParams['id'] = $DD_primary.val();
                        $queryParams['search'] = params.term;
                        return $queryParams;
                    },
                    processResults: function (data) {
                        var results = [];
                        $.each(data, function(index, item){
                            results.push({
                                id: item.id,
                                text: item.name
                            });
                        });
                        return {
                            results: results
                        };
                    }
                }
            }).on("change", function() {
                console.log('2:'+$DD_second.val());
                if($DD_second.val() == null){
                    DDsetState($DD_third, false); console.log('disable:3');
                }else{
                    DDsetState($DD_third, true); console.log('enable:3');
                }
            });
        }

        if($DD_third.length) {
            $DD_third.select2({
                placeholder: {
                    id: '', // the value of the option
                    text: 'Select...'
                },
                allowClear:true,
                minimumResultsForSearch: 10,
                initSelection : function (element, callback) {
                    $settings = {id:'',name:'Select...'};
                    option = $('<option></option>').text($settings.name).val('');
                    option.appendTo(element);
                    $optionDefault = {
                        id:$settings.id,
                        text:$settings.name
                    };
                    $optionSelected = {};
                    if(element.data('ajax-value')){
                        $settings = element.data('ajax-value');
                        option = $('<option></option>').text($settings.name).val($settings.id).attr('selected', true);
                        option.appendTo(element);

                        $optionSelected.id = $settings.id;
                        $optionSelected.text = $settings.name;
                    }
                    $options = $.extend({}, $optionDefault, $optionSelected);
                    callback($options);
                },
                ajax: {
                    url: $DD_third.data('ajax-route'),
                    delay: 100,
                    dataType: 'json',
                    type: "GET",
                    data: function (params) {
                        var $queryParams = {};
                        if ($DD_third.data('ajax-route-params')) {
                            $.each($DD_third.data('ajax-route-params'), function (index, value) {
                                $queryParams[index] = value;
                            });
                        }
                        $queryParams['id'] = $DD_second.val();
                        $queryParams['search'] = params.term;
                        return $queryParams;
                    },
                    processResults: function (data) {
                        var results = [];
                        $.each(data, function(index, item){
                            results.push({
                                id: item.id,
                                text: item.name
                            });
                        });
                        return {
                            results: results
                        };
                    }
                }
            });
        }
    }
    DDSelect2("#state","#county","#city");



}); //end