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

Question

我想弄清楚是否可以只更新 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']);
};

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

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

Answer 1

只需更新下拉列表的 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']);