Add items to Select2 Cascade

Question

my English is not good. sorry.

and I do not know Json and Ajax.

I want add More than two item to Select2 Cascade.

I created one more select/option(#model) and It does not work.

I created three files in the json folder: animal.json , Vehicles.json , horse.json

animal.json and Vehicles.json files run and executed, but horse.json file is not run and executed.

I want the third select/option(#model) to prop and open, when I select the Horse.

I saw the following page but I do not understand it. Can you modify or create my code here? http://ajaxray.com/blog/select2-dependent-cascading-select-list-reload/

My Json files is as follows:

{
"201" : "Horse",
"202" : "Elephant",
"203" : "Donkey",
"204" : "Camel",
"204" : "Tiger"
}

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 = '';
                for(var id in items) {
                    newOptions += '';
                }

                child.select2('destroy').html(newOptions).prop("disabled", false)
                    .select2(options);
                
                afterActions.forEach(function (callback) {
                    callback(parent, child, items);
                });
            });
        });
    }

    return Select2Cascade;

})( window, $);

$(document).ready(function() {
    var select2Options = { width: 'resolve' };
    var apiUrl =  'json/:parentId:.json';

    $('select').select2(select2Options);                 

    var cascadLoading = new Select2Cascade($('#type'), $('#subtype'), apiUrl, select2Options);
cascadLoading.then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
    // Dump response data
    console.log(items);
});
        var cascadLoading = new Select2Cascade($('#subtype'), $('#model'), apiUrl, select2Options);
cascadLoading.then( function(parent, child, items) {
    // Open the child listbox immediately
    child.select2('open');
    // Dump response data
    console.log(items);
});
     $('#subtype').prop('disabled', true);
     $('#model').prop('disabled', true);

});





Select2
 
    










            
              I'd like to ride   
              
                
              
            
            
              More specifically       
              
                
              
            
  
              More specifically

Add items to Select2 Cascade

Answers (1)

Related Questions