How to populate a dependent select's options in javascript?
How to populate a dependent select's options in javascript?

I'm trying to retrofit Datatables/Editor into an existing java/jsp/javascript based system. I have two select objects: Job_Value_Code's options depend upon the current value of Job_Type_Code's selected option. Upon initialization Job_Value_Code's definition is:
{label: 'Value', name: 'Job_Value_Code', type: 'select', options:
[{label: "A : ABC Company", value: "A"},
{label: "B : BCD Company", value: "B"},
{label: "C : CDE Company", value: "C"},
{label: "D : DEF Company", value: "D"}
]}
A simplified version of my editor.dependent code looks like this:
editor.dependent('Job_Type_Code', function(val, data, callback){
var myObj = "{'options': {'Job_Value_Code' [{'label':'David', 'value':'DPA'},{'label':'Mary', 'value':'MQS'}]}}";
return myObj;
});
I'm trying to replace the options of Job_Value_Code with the names of two people. When I run it, the three "dancing bars" do not appear next to the Job_Type_Code select so it appears to me that Editor is happy with my code but the old options for Job_Value_Code still remain while the new ones are not there. What am I doing wrong?
I tried to use code similar to:
editor.field("Job_Value_Code").update('options': "{'label':'David', 'value':'DPA'}");
but couldn't get that to work. It would empty out the current options but not add the new ones.
I'm probably missing something very simple but I just don't see it.
Thanks
This question has an accepted answers - jump to answer
Answers
It needs to be an object you return from the
dependent()
method - just remove the quotes to make it an object not a string:This one:
Has a similar issue - like the examples on the
dependent()
page it should be:i.e. an array of objects.
Allan
It took a while but I finally got the dependent functionality working in my app with your help. Thanks