javascript - dat.gui:更新 Controller 的下拉列表值？

Question

我想弄清楚是否可以只更新 dat.gui Controller 的下拉列表值。

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

这确实改变了值，但它创建了一个带有新索引的新模板 Controller (删除之前的索引)并使其下次无法工作。它还将新的推送到 Controller 列表的底部。

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

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