Skip to main content
Joe_2D3D
Participant
Oct 12, 2022 7:48 PM UTC
Answered

How to populate combobox component via JavaScript?

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 is closed to new replies. Start a new post to keep the conversation going.
    kglad
    kgladCorrect answer
    Community Expert
    Oct 12, 2022 7:56 PM UTC

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

    View reply

    3 replies

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    Oct 12, 2022 7:56 PM UTC

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

    Translate
      Joe_2D3DAuthor
      Participant
      Oct 13, 2022 5:31 PM UTC

      This worked wonderfully, thank you.

      Translate
      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      Oct 13, 2022 5:46 PM UTC

      you're welcome.

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices