I have a select widget as follows
var pulseLen = new Select({
id : "_PulseLength",
label:"PulseLength",
name: "pulseLength",
value : 100,
options: [
{ label : "5", value :"5" },
{ label : "10", value :"10" },
{ label : "30", value :"30" },
{ label : "100", value :"100" },
{ label : "300", value :"300" }
]
});
Now based on the value selected in the above pulseLength widget i have to change the options of the below Select Range widget Its part of GUI validations.
var range = new Select({
id:"_Range",
label:"Range"),
name: "range",
value: "5000",
options: [
{ label : "5", value :"5000" },
{ label : "10", value :"10000" },
{ label : "20", value :"20000" },
{ label : "40", value :"40000" },
{ label : "80", value :"80000" },
{ label : "160", value :"160000" },
{ label : "260", value :"260000" }
]
});
API to generate dynamic options
function getRangeArray(pulselen){
var myOptions = "";
var array = [0.5,1,2,5,10,20,40];
console.log("Length got is " + pulselen);
for(i=0;i<array.length;i++){
var myTmp = "{label : '" + array[i] + "', value : '"+array[i] * 1000 + "'}";
//console.log(myTmp);
if(i==array.length-1){
myOptions = myOptions + myTmp;
}else{
myTmp=myTmp+",";
myOptions = myOptions + myTmp;
}
//console.log(myOptions);
}
//console.log(myOptions);
myOptions = "[" + myOptions + "];";
return myOptions;
}
OnChange event of the pulseLength trying to change the options
var newOptions = getRangeArray(value);
console.log(newOptions);
registry.byId("_Range").set("options", newOptions);
Sample Output
[{label : '0.5', value : '500'},
{label : '1', value : '1000'},
{label : '2', value : '2000'},
{label : '5', value : '5000'},
{label : '10', value : '10000'},
{label : '20', value : '20000'},
{label : '40', value : '40000'}];