Pass json object from Javascript to external user form select menu

BPMN & Modeling Discussion & Questions
1

Hi, I have the following process variable created in an external task:
var idlist = [“id1”,“id2”,“id3”];
var idmap = {
“id1”:“str1”,
“id2”:“str2”,
“id3”:“str3”
};
var strmap = {
“str1.1”:“string 1A”,
“str1.2”:“string 1B”,
“str1.3”:“string 1C”,
“str2”:“string 2A”,
“str3”:“string 3A”
};
Then, in an external form, I want to first have a select menu with the options in the “idlist”. I know it can be done with this in a html file:<select cam-variable-name="selectedID" cam-variable-type="String" cam-choices="idlist"> </select>

Then I have a second select menu that contains options based on the selection in previous menu. The user select an id, it will query the process variable “idmap” and get the corresponding value. For example, if I choose “id1” from the previous select menu, the corresponding value is “str1”. Then we look up “str1” in the “strmap”. Then I want to show all items with the matching key name; in this case, it will return [“string 1A”, “string 1B”, “string 1C”] as select options in a second select menu.

My question now is how to write script for this second select menu. I know with with text field we could do this based on Camunda BPM documentation | docs.camunda.org

       <input type="text"
           class="form-control"
           id="customField"
           ng-model="customerId">
         var variableManager = camForm.variableManager;
    
         $scope.customerId = null;
    
      camForm.on('form-loaded', function() {
        // fetch the variable 'customVariable'
        variableManager.fetchVariable('customVariable');
       camForm.on('variables-fetched', function() {
        // value has been fetched, bind to $scope.customerId
        $scope.customerId = variableManager.variable('customVariable').value;
      });
      });

But what should I do for a select menu? Thanks!
2