Skip to content

Instantly share code, notes, and snippets.

@carlosqueiroz

carlosqueiroz/ select2-cascade.js

Forked from ajaxray/ select2-cascade.js
Created January 23, 2019 21:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save carlosqueiroz/81c1498d52ddd12e4d51f1cf78f34194 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save carlosqueiroz/81c1498d52ddd12e4d51f1cf78f34194 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ajaxray ajaxray revised this gist Feb 22, 2017. 2 changed files with 13 additions and 10 deletions.
    15 changes: 8 additions & 7 deletions select2-cascade.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,23 +3,24 @@
    *
    * @url : https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
    * @auther : Anis Uddin Ahmad <[email protected]>
    *
    * Live demo - https://codepen.io/ajaxray/full/oBPbQe/
    *
    * Live demo - https://codepen.io/ajaxray/full/oBPbQe/
    * w: http://ajaxray.com | t: @ajaxray
    */
    var Select2Cascade = ( function(window, $) {

    function Select2Cascade(parent, child, url) {
    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().on("change", function (e) {
    parent.select2(select2Options).on("change", function (e) {

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

    @@ -30,8 +31,8 @@ var Select2Cascade = ( function(window, $) {
    }

    child.select2('destroy').html(newOptions).prop("disabled", false)
    .select2({ width: 'resolve', placeholder: "-- Select --" });

    .select2(options);
    afterActions.forEach(function (callback) {
    callback(parent, child, items);
    });
    8 changes: 5 additions & 3 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,10 +7,11 @@ Check the [live demo](https://codepen.io/ajaxray/full/oBPbQe/).

    How to use
    --------------
    Create a new instance of `Select2Cascade` by passing the following 3 things -
    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:*
    @@ -32,8 +33,9 @@ Examples
    When `#parentList` is changed, call to *path/to/geocode/district/SELECTED-PARENT/zilla*
    and set the options of `#childList` from the ajax response.
    ```JavaScript
    new Select2Cascade($('#district'), $('#zilla'), 'path/to/geocode/district/:parentId:/zilla');
    new Select2Cascade($('#zilla'), $('#thana'), 'path/to/geocode/zilla/:parentId:/thana');
    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)
  2. @ajaxray ajaxray revised this gist Feb 8, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,7 @@ The response json should be a flat object of value:label pairs. e,g,
    "20301401" : "Feni Zila"
    }
    ```
    Otherwisw you have to adjust the way of populating child options (at line 29).

    Examples
    ----------
  3. @ajaxray ajaxray revised this gist Feb 7, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,8 +13,8 @@ Create a new instance of `Select2Cascade` by passing the following 3 things -
    * URL to load child items from

    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
    **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,
    ```JavaScript
  4. @ajaxray ajaxray revised this gist Feb 7, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    Select2 Cascade (for v4.x)
    =============================

    Loadeding/refreshing options of a select2 list box using ajax based on selection of another select2 list box.
    Loadeding/refreshing options of a select2 list box (using ajax) based on selection of another select2 list box.

    Check the [live demo](https://codepen.io/ajaxray/full/oBPbQe/).

  5. @ajaxray ajaxray revised this gist Feb 7, 2017. 2 changed files with 23 additions and 19 deletions.
    15 changes: 7 additions & 8 deletions select2-cascade.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,14 +3,14 @@
    *
    * @url : https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
    * @auther : Anis Uddin Ahmad <[email protected]>
    *
    *
    * Live demo - https://codepen.io/ajaxray/full/oBPbQe/
    * w: http://ajaxray.com | t: @ajaxray
    */
    var Select2Cascade = ( function(window, $) {

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

    // Register functions to be called after cascading data loading done
    this.then = function(callback) {
    @@ -19,12 +19,11 @@ var Select2Cascade = ( function(window, $) {
    };

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

    requestData.parent_id = $(this).val();

    child.prop("disabled", true);

    var _this = this;
    $.getJSON(url, requestData, function(items) {

    $.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>';
    @@ -42,4 +41,4 @@ var Select2Cascade = ( function(window, $) {

    return Select2Cascade;

    })( window, $);
    })( window, $);
    27 changes: 16 additions & 11 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,37 +3,42 @@ 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](https://codepen.io/ajaxray/full/oBPbQe/).

    How to use
    --------------
    Create a new instance of `Select2Cascade` by passing the following 4 things -
    Create a new instance of `Select2Cascade` by passing the following 3 things -
    * Parent select2 listbox
    * Child select2 listbox
    * URL to load child items on selection changed
    * Optional data object to be sent with request. The selected value of parent select2 listbox will be set in this data object as `parent_id`
    * URL to load child items from

    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,
    ```JavaScript
    {
    20150415: "Chittagong Zila",
    20190901: "Comilla Zila",
    20221601: "Cox's Bazar Zila",
    20301401: "Feni Zila"
    "20150415" : "Chittagong Zila",
    "20190901" : "Comilla Zila",
    "20221601" : "Cox's Bazar Zila",
    "20301401" : "Feni Zila"
    }
    ```

    Examples
    ----------
    When `#parentList` is changed, call to */path/to/geocode?type=district&parent_id=SELECTED-PARENT*
    When `#parentList` is changed, call to *path/to/geocode/district/SELECTED-PARENT/zilla*
    and set the options of `#childList` from the ajax response.
    ```JavaScript
    new Select2Cascade($('#district'), $('#zila'), 'path/to/geocode', {type:"zila", parent_id: ''});
    new Select2Cascade($('#zila'), $('#thana'), 'path/to/geocode', {type:"thana", parent_id: ''});
    new Select2Cascade($('#district'), $('#zilla'), 'path/to/geocode/district/:parentId:/zilla');
    new Select2Cascade($('#zilla'), $('#thana'), 'path/to/geocode/zilla/:parentId:/thana');
    ```

    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 -
    ```JavaScript
    var cascadLoading = new Select2Cascade($('#parent'), $('#child'), 'path/to/geocode', {type:"child", parent_id: ''});
    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');
  6. @ajaxray ajaxray revised this gist Aug 3, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -26,8 +26,8 @@ Examples
    When `#parentList` is changed, call to */path/to/geocode?type=district&parent_id=SELECTED-PARENT*
    and set the options of `#childList` from the ajax response.
    ```JavaScript
    new Select2Cascade($('#district'), $('#zila'), 'path/to/geocode', {type:"district", parent_id: ''});
    new Select2Cascade($('#zila'), $('#thana'), 'path/to/geocode', {type:"zila", parent_id: ''});
    new Select2Cascade($('#district'), $('#zila'), 'path/to/geocode', {type:"zila", parent_id: ''});
    new Select2Cascade($('#zila'), $('#thana'), 'path/to/geocode', {type:"thana", parent_id: ''});
    ```

    If you want to do something with the response data or selectboxes, you can set (any number of)
  7. @ajaxray ajaxray revised this gist Aug 3, 2016. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -26,13 +26,14 @@ Examples
    When `#parentList` is changed, call to */path/to/geocode?type=district&parent_id=SELECTED-PARENT*
    and set the options of `#childList` from the ajax response.
    ```JavaScript
    new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
    new Select2Cascade($('#district'), $('#zila'), 'path/to/geocode', {type:"district", parent_id: ''});
    new Select2Cascade($('#zila'), $('#thana'), 'path/to/geocode', {type:"zila", parent_id: ''});
    ```

    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 -
    ```JavaScript
    var cascadLoading = new Select2Cascade($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    var cascadLoading = new Select2Cascade($('#parent'), $('#child'), 'path/to/geocode', {type:"child", parent_id: ''});
    cascadLoading.then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
  8. @ajaxray ajaxray revised this gist Aug 2, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@ Examples
    When `#parentList` is changed, call to */path/to/geocode?type=district&parent_id=SELECTED-PARENT*
    and set the options of `#childList` from the ajax response.
    ```JavaScript
    new Select2Cascade($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
    ```

    If you want to do something with the response data or selectboxes, you can set (any number of)
  9. @ajaxray ajaxray renamed this gist Aug 2, 2016. 1 changed file with 0 additions and 0 deletions.
    0 select2-cascade.js → select2-cascade.js
    View file
    File renamed without changes.
  10. @ajaxray ajaxray revised this gist Jul 31, 2016. 2 changed files with 7 additions and 9 deletions.
    14 changes: 6 additions & 8 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,12 +33,10 @@ If you want to do something with the response data or selectboxes, you can set (
    callbacks to be executed after the child listbox refreshed -
    ```JavaScript
    var cascadLoading = new Select2Cascade($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    cascadLoading
    .then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
    }).then(function(parent, child, items) {
    // Dump response data
    console.log(items);
    });
    cascadLoading.then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
    // Dump response data
    console.log(items);
    })
    ```
    2 changes: 1 addition & 1 deletion select2-cascade.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    * @url : https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
    * @auther : Anis Uddin Ahmad <[email protected]>
    *
    * w: ajaxray.com | t: @ajaxray
    * w: http://ajaxray.com | t: @ajaxray
    */
    var Select2Cascade = ( function(window, $) {

  11. @ajaxray ajaxray revised this gist Jul 31, 2016. 2 changed files with 15 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,10 +9,10 @@ Create a new instance of `Select2Cascade` by passing the following 4 things -
    * Parent select2 listbox
    * Child select2 listbox
    * URL to load child items on selection changed
    * Optional data object to be sent with request. The selected value of parent selects listbox will be set in this data object as `parent_id`
    * Optional data object to be sent with request. The selected value of parent select2 listbox will be set in this data object as `parent_id`

    The response json should be flat object of value:label pairs. e,g,
    ```
    The response json should be a flat object of value:label pairs. e,g,
    ```JavaScript
    {
    20150415: "Chittagong Zila",
    20190901: "Comilla Zila",
    @@ -23,15 +23,15 @@ The response json should be flat object of value:label pairs. e,g,

    Examples
    ----------
    When `#parentList` is changed, call to __/path/to/geocode?type=district&parent_id=SELECTED-PARENT__
    and set the options of `#childList` from response.
    ```
    When `#parentList` is changed, call to */path/to/geocode?type=district&parent_id=SELECTED-PARENT*
    and set the options of `#childList` from the ajax response.
    ```JavaScript
    new Select2Cascade($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    ```

    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 -
    ```
    ```JavaScript
    var cascadLoading = new Select2Cascade($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    cascadLoading
    .then( function(parent, child, items) {
    8 changes: 8 additions & 0 deletions select2-cascade.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,11 @@
    /**
    * 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 <[email protected]>
    *
    * w: ajaxray.com | t: @ajaxray
    */
    var Select2Cascade = ( function(window, $) {

    function Select2Cascade(parent, child, url, requestData) {
  12. @ajaxray ajaxray created this gist Jul 31, 2016.
    44 changes: 44 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    Select2 Cascade (for v4.x)
    =============================

    Loadeding/refreshing options of a select2 list box using ajax based on selection of another select2 list box.

    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 on selection changed
    * Optional data object to be sent with request. The selected value of parent selects listbox will be set in this data object as `parent_id`

    The response json should be flat object of value:label pairs. e,g,
    ```
    {
    20150415: "Chittagong Zila",
    20190901: "Comilla Zila",
    20221601: "Cox's Bazar Zila",
    20301401: "Feni Zila"
    }
    ```

    Examples
    ----------
    When `#parentList` is changed, call to __/path/to/geocode?type=district&parent_id=SELECTED-PARENT__
    and set the options of `#childList` from response.
    ```
    new Select2Cascade($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    ```

    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($('#parentList'), $('#childList'), 'path/to/geocode', {type:"district", parent_id: ''});
    cascadLoading
    .then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
    }).then(function(parent, child, items) {
    // Dump response data
    console.log(items);
    });
    ```
    37 changes: 37 additions & 0 deletions select2-cascade.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    var Select2Cascade = ( function(window, $) {

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

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

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

    requestData.parent_id = $(this).val();
    child.prop("disabled", true);

    var _this = this;
    $.getJSON(url, requestData, 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({ width: 'resolve', placeholder: "-- Select --" });

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

    return Select2Cascade;

    })( window, $);