Javascript dat.gui：是否更新控制器的下拉列表值？

我试图弄清楚是否可以只更新dat.gui控制器的下拉列表值

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

更改切换后，我想修改模板选项：

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

这确实会更改值，但它会使用新索引创建一个新的模板控制器（删除上一个），并使其下次无法工作。它还将新的控制器推到控制器列表的底部

---

在我添加更多代码以尝试追踪新修改/新控制器之前，我想我应该看看是否有人有更好的方法

我也试着做同样的事情。 我的解决方案是使用onChange删除和添加控制器。 因为它把它推到了底部，打乱了顺序，我不能像你直接做的那样。我还必须删除并在seq中添加下面的所有内容

或者，如果有太多的控制器，则更方便的做法是只使用一个函数来删除所有控制器，并为此类情况添加所有控制器

为您的示例编辑我的解决方案，它将是这样的

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
}

---

我也试着做同样的事情。 我的解决方案是使用onChange删除和添加控制器。 因为它把它推到了底部，打乱了顺序，我不能像你直接做的那样。我还必须删除并在seq中添加下面的所有内容

或者，如果有太多的控制器，则更方便的做法是只使用一个函数来删除所有控制器，并为此类情况添加所有控制器

为您的示例编辑我的解决方案，它将是这样的

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
}

---

只需更新下拉列表的html内容

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']);

函数updateDropdown（目标，列表）{
innerHTMLStr=“”；
对于（var i=0；i只需更新下拉列表的html内容

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']);

函数updateDropdown（目标，列表）{
innerHTMLStr=“”；
对于（var i=0；i您可以使用该函数。我将此代码作为示例。我希望您可以调整它

var controller;

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

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

您可以找到实时代码。
您可以使用该函数。我将此代码作为示例。我希望您可以修改它

var controller;

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

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

您可以找到实时代码。
Wow，这个问题在最近的版本中已经解决了吗？或者这是唯一的方法？Wow，这个问题在最近的版本中已经解决了吗？或者这是唯一的方法？这只在第一次工作。之后它会抛出一个DOM错误：“未捕获的DomeException:未能在'Node'上执行'removeChild'：要移除的节点不是此节点的子节点。这仅在第一次起作用。之后，它抛出DOM错误：“未捕获的DomeException:未能在'Node'上执行'removeChild'：要移除的节点不是此节点的子节点。”