javascript - 使用存储在 "dynamic"数组中的数据构建菜单或组合框

Question

我想向我的界面添加一个组合框或菜单按钮，其中包含来自数组的数据。数组中的数据并不总是相同，所以我需要按钮是“动态的”。我怎样才能做到这一点？如果数组发生变化，我无法指定模型...

编辑:我正在使用 ExtJS 6，所以我需要能够提供菜单参数:

 menu: [{
     text:'Menu Item 1'
   },{
     text:'Menu Item 2'
   },{
     text:'Menu Item 3'
 }]

示例:

1) 用户选择一个菜单项并单击发送按钮。

2) 根据用户单击的项目的值，创建一个 JavaScript 数组，其中有时包含 2 个字段，有时包含 10 个字段。

3) 这些字段显示在新的菜单按钮或组合框中。

感谢您的帮助!

Answer 1

HTML

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
    <option value="A">A</option>
    <option value="B">B</option>
</datalist>

Javascript

function generateOptionsFromDynamicArray (arr) {
    // Get the datalist by id, cache option variable
    var datalist = document.querySelector('#exampleList'),
        option;
    // Remove old options
    while( datalist.firstChild ) {
        datalist.removeChild(datalist.firstChild);
    }
    // Loop through array
    for (var i = 0, l = arr.length; i < l; ++i) {
        option = document.createElement('option');
        option.setAttribute('value', arr[i]);
        option.innerText = arr[i];
        datalist.appendChild(option);
    }
}

我创建了一个函数，您可以将该动态数组传递到其中以更新组合框，在本例中我使用的是数据列表。 关于这段代码的几点，您应该添加一个检查以确保 arr 是一个数组或“类似数组”(我正在看您的 typedarrays )。当这些更改发生时，您还应该从 DOM 中删除数据列表，这样您就不会在每次迭代时重新绘制 DOM

我创建了一个 fiddle用于测试。