Skip to main content
Participant
October 12, 2022
Answered

How to populate combobox component via JavaScript?

  • October 12, 2022
  • 1 reply
  • 241 views

I cannot figure out how to dynamically populate a combobox component on stage (canvas - HTML) using JS code and not the component's built in options. I want to have the cb list all countries in the world - via my own list.
Do I have to modify the component's UI JS file?
Any help would be appreciated. Thanks.

    This topic has been closed for replies.
    Correct answer kglad

    no, if your component has instance name cb, you can use:

     

    // tailor dataA to suit your needs.

    var dataA = [{"data":"1","label":"Joe Walsh"},{"data":"2","label":"Don Henley"}];
    stage.on("drawend", drawEndF, this, true, {count:3});

    function drawEndF(e,data){
    $('#cb').append($("<option/>").attr("value",0).text("Select an option.."));
    for(var i=0;i<dataA.length;i++){
    $('#cb').append($("<option/>").attr("value",i).text(dataA[i].label));
    }
    addF.bind(this)();
    }

    function addF(){
    $("#dom_overlay_container").on("change", "#cb", f.bind(this));
    }
    function f(e){
    console.log(labelF(Number(e.target.value)));
    }
    function labelF(value){
    for(var i=0;i<dataA.length;i++){
    if(dataA[i].data == value+1){
    return dataA[i].label;
    }
    }
    }

    1 reply

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    October 12, 2022

    no, if your component has instance name cb, you can use:

     

    // tailor dataA to suit your needs.

    var dataA = [{"data":"1","label":"Joe Walsh"},{"data":"2","label":"Don Henley"}];
    stage.on("drawend", drawEndF, this, true, {count:3});

    function drawEndF(e,data){
    $('#cb').append($("<option/>").attr("value",0).text("Select an option.."));
    for(var i=0;i<dataA.length;i++){
    $('#cb').append($("<option/>").attr("value",i).text(dataA[i].label));
    }
    addF.bind(this)();
    }

    function addF(){
    $("#dom_overlay_container").on("change", "#cb", f.bind(this));
    }
    function f(e){
    console.log(labelF(Number(e.target.value)));
    }
    function labelF(value){
    for(var i=0;i<dataA.length;i++){
    if(dataA[i].data == value+1){
    return dataA[i].label;
    }
    }
    }

    Joe_2D3DAuthor
    Participant
    October 13, 2022

    This worked wonderfully, thank you.

    kglad
    Community Expert
    Community Expert
    October 13, 2022

    you're welcome.