ajaxray/ select2-cascade.js

## select2-cascade.js
/**
 * A Javascript module to loadeding/refreshing options of a select2 list box using ajax based on selection of another select2 list box.
 *
 * @url : https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
 * @auther : Anis Uddin Ahmad <anis.programmer@gmail.com>
 *
 * Live demo - https://codepen.io/ajaxray/full/oBPbQe/
 * w: http://ajaxray.com | t: @ajaxray
 */
var Select2Cascade = ( function(window, $) {

    function Select2Cascade(parent, child, url, select2Options) {
        var afterActions = [];
        var options = select2Options || {};

        // Register functions to be called after cascading data loading done
        this.then = function(callback) {
            afterActions.push(callback);
            return this;
        };

        parent.select2(select2Options).on("change", function (e) {

            child.prop("disabled", true);
            var _this = this;

            $.getJSON(url.replace(':parentId:', $(this).val()), function(items) {
                var newOptions = '<option value="">-- Select --</option>';
                for(var id in items) {
                    newOptions += '<option value="'+ id +'">'+ items[id] +'</option>';
                }

                child.select2('destroy').html(newOptions).prop("disabled", false)
                    .select2(options);

                afterActions.forEach(function (callback) {
                    callback(parent, child, items);
                });
            });
        });
    }

    return Select2Cascade;

})( window, $);

## readme.md

      
    Raw
  

              readme.md
            
          
    Select2 Cascade (for v4.x)

Loadeding/refreshing options of a select2 list box (using ajax) based on selection of another select2 list box.
Check the live demo.
How to use

Create a new instance of Select2Cascade by passing the following 4 things -

Parent select2 listbox
Child select2 listbox
URL to load child items from
(OPTIONAL) select2 options

To set the parent selected value in ajax request, keep :parentId: as a placeholder in url. The selected value of parent select2 listbox will replace the :parentId: string in url. For example -

Query string: /path/to/api?type=childType&parent_id=:parentId:

RESTful url: /path/to/api/items/:parentId:/sub-items
The response json should be a flat object of value:label pairs. e,g,
{
  "20150415" : "Chittagong Zila",
  "20190901" : "Comilla Zila",
  "20221601" : "Cox's Bazar Zila",
  "20301401" : "Feni Zila"
}
Otherwisw you have to adjust the way of populating child options (at line 29).
Examples

When #parentList is changed, call to path/to/geocode/district/SELECTED-PARENT/zilla
and set the options of #childList from the ajax response.
var options = { width: 'resolve' };
new Select2Cascade($('#district'), $('#zilla'), 'path/to/geocode/district/:parentId:/zilla', options);
new Select2Cascade($('#zilla'), $('#thana'), 'path/to/geocode/zilla/:parentId:/thana', options);
If you want to do something with the response data or selectboxes, you can set (any number of)
callbacks to be executed after the child listbox refreshed -
var cascadLoading = new Select2Cascade($('#parent'), $('#child'), 'path/to/api/categories?parent_id=:parentId:');
cascadLoading.then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
    // Dump response data
    console.log(items);
})
	/**
	* A Javascript module to loadeding/refreshing options of a select2 list box using ajax based on selection of another select2 list box.
	*
	* @url : https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
	* @auther : Anis Uddin Ahmad <anis.programmer@gmail.com>
	*
	* Live demo - https://codepen.io/ajaxray/full/oBPbQe/
	* w: http://ajaxray.com \| t: @ajaxray
	*/
	var Select2Cascade = ( function(window, $) {

	function Select2Cascade(parent, child, url, select2Options) {
	var afterActions = [];
	var options = select2Options \|\| {};

	// Register functions to be called after cascading data loading done
	this.then = function(callback) {
	afterActions.push(callback);
	return this;
	};

	parent.select2(select2Options).on("change", function (e) {

	child.prop("disabled", true);
	var _this = this;

	$.getJSON(url.replace(':parentId:', $(this).val()), function(items) {
	var newOptions = '<option value="">-- Select --</option>';
	for(var id in items) {
	newOptions += '<option value="'+ id +'">'+ items[id] +'</option>';
	}

	child.select2('destroy').html(newOptions).prop("disabled", false)
	.select2(options);

	afterActions.forEach(function (callback) {
	callback(parent, child, items);
	});
	});
	});
	}

	return Select2Cascade;

	})( window, $);