dat.gui: Update the dropdown list values for a controller?

Question

I am trying to figure out if it's possible to update just the dropdown list values for a dat.gui controller.

var gui = new dat.GUI();
gui.add(this, 'toggle').onChange( updateToggle );
gui.add(item, 'template', [ 'A', 'B', 'C', 'D' ]).onChange( updateTemplate );

When the toggle is changed, i want to modify the template options:

if (startRibbon) {
     gui.__controllers[1].options(['A', 'B']);
} else {
     gui.__controllers[1].options(['A', 'B', 'C', 'D']);
};

This does change the values, but it creates a new template controller with a new index (deleting the previous one) and making it not work the next time. It also pushes the new one to the bottom of the controller list.

Before I add more code to try and chase after the new modified/new controller, I figured I should see if anybody has a better way.

Answer 1

I was trying to do the same thing. My solution is to use the onChange to remove and add the controller. Because it pushes it to the bottom and messes up the order, I cannot just do what you did directly. I also have to remove and add back in seq all those that are below it.

Or if there are too many controllers, it would be more convenient to just have a function to remove all and add all back for such cases.

Editing my solution for your example, it will be something like this...

var arr_template = [ 'A', 'B', 'C', 'D' ];

var gui = new dat.GUI();
gui.add(this, 'toggle').onChange( updateToggle );  // controller 0
gui.add(item, 'template', arr_template).onChange( updateTemplate ); // controller 1
gui.add(extra,'hello'); // controller 2

function updateTemplate()
{
  if (startRibbon) {
     arr_template = [ 'A', 'B'];
  } else {
     arr_template = [ 'A', 'B', 'C', 'D' ];
  }

  // remove controllers >= 1 in reverse order
  gui.__controllers[2].remove();
  gui.__controllers[1].remove();

  // add back in order
  gui.add(item, 'template', arr_template).onChange( updateTemplate ); // controller 1
  gui.add(extra,'hello'); // controller 2
}

Answer 2

Just update the html content of the dropdown.

function updateDropdown(target, list){   
    innerHTMLStr = "";
    for(var i=0; i<list.length; i++){
        var str = "<option value='" + list[i] + "'>" + list[i] + "</option>";
        innerHTMLStr += str;        
    }

    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

dropdown = gui.add(MyObject, 'Values', ['A', 'B']);

updateDropdown(dropdown , ['A', 'B', 'C', 'D']);

Answer 3

You can use the function options. I code this for example purposes. I hope you can adapt it.

var controller;

var config = {
  'value': '1',
  'changeValues': function () {
    controller.options( [ 'A', 'B', 'C' ] );
    controller.updateDisplay();
  }
};

var gui = new dat.GUI();
gui.add( config, 'changeValues' );
controller = gui.add( config, 'value', [ '1', '2', '3' ] );

Here you can find the live code.