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

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

divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1
edited October 2019 in Free community support

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

  • allanallan Posts: 63,195Questions: 1Answers: 10,412 Site admin
    Answer ✓

    It needs to be an object you return from the dependent() method - just remove the quotes to make it an object not a string:

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

    This one:

    editor.field("Job_Value_Code").update('options': "{'label':'David', 'value':'DPA'}");

    Has a similar issue - like the examples on the dependent() page it should be:

    editor.field("Job_Value_Code").update([{'label':'David', 'value':'DPA'}]);
    

    i.e. an array of objects.

    Allan

  • divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1

    It took a while but I finally got the dependent functionality working in my app with your help. Thanks

This discussion has been closed.