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);
