Coral UI 3 : How to populate option in second selection based on selection change event of first drop-down

We achieved this functionality by Following listener.

1. Add granite:class property to selector radio group and value will be "cq-dialog-dropdown-selector".

2. Add granite:data node under selector node.

3. Add cq-dialog-dropdown-target property to granite:data node and assign some unique css class name that you can give it to target element

4. Add granite:class property to target element and assign that unique class name.

(function (document, $, Coral) {

    "use strict";

    var prevRadioGroupVal;

    var SELECTOR_DROP_DOWN_CLASS = ".cq-dialog-dropdown-selector";

    $( document ).on("foundation-contentloaded", function(e) {

$(SELECTOR_DROP_DOWN_CLASS, e.target).each(function (i, element) {

            var target = $(element).data("cq-dialog-dropdown-target");

            Coral.commons.ready(element, function (component) {

                $(component).on("change",function () {

                   fillData($(component),target);

                });

            });

fillData($(element), target);

        });

    });

    function fillData(component, target) {

        var value = component != null ? component.value : $(target).val();

        if(!value) {

            var tempCheckBoxArray = component.find("[checked]");

            if(tempCheckBoxArray.length > 1)

            {

                for (var i = 0; i < tempCheckBoxArray.length; i++) {

                    if( $(tempCheckBoxArray[i]).val() != prevRadioGroupVal)

                    {

                        value = $(tempCheckBoxArray[i]).val();

                    }

                }

            }

            else

           {

                value = component.find("[checked]").val();

            }

        }

     var prevSelectedVal = $(target).find('coral-select-item').filter(':selected').val();

        $(target).find("coral-select-item").remove();

        for(var i=1;i<=value;i++) {

            if(i==prevSelectedVal)

            {

                $(target).append("<coral-select-item value="+i+" selected>"+i+"</coral-select-item>");

            }

            else

            {

                $(target).append("<coral-select-item value="+i+">"+i+"</coral-select-item>");

            }

        }

        if(value==1)

        {

            $(target).parent().addClass("hide");

        }

        else

        {

            $(target).parent().removeClass("hide");

        }

        prevRadioGroupVal = value;

    }

})(document, Granite.$, Coral);