有条件地填充列表框

基础概念

有条件地填充列表框是指根据特定的条件或数据动态地向列表框（如HTML中的<select>元素）添加选项。这种技术在用户界面设计中非常常见，可以提高用户体验和数据处理的效率。

类型

基于用户输入：根据用户在表单中的其他输入字段动态更新列表。
基于数据库查询：从数据库中检索符合条件的数据填充列表。
基于API调用：通过调用外部API获取数据并填充列表。

应用场景

搜索建议：当用户输入关键词时，显示相关的搜索建议。
下拉菜单：根据用户选择的分类显示相应的子分类。
权限管理：根据用户的角色显示可访问的功能选项。

示例代码

以下是一个简单的JavaScript示例，展示如何根据用户输入的条件动态填充HTML列表框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Listbox</title>
</head>
<body>
    <input type="text" id="filterInput" placeholder="Enter a letter">
    <select id="dynamicListbox" size="5"></select>

    <script>
        const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
        const listbox = document.getElementById('dynamicListbox');
        const filterInput = document.getElementById('filterInput');

        function updateListbox() {
            const filterValue = filterInput.value.toUpperCase();
            listbox.innerHTML = ''; // Clear existing options

            for (const item of data) {
                if (item.toUpperCase().startsWith(filterValue)) {
                    const option = document.createElement('option');
                    option.value = item;
                    option.textContent = item;
                    listbox.appendChild(option);
                }
            }
        }

        filterInput.addEventListener('input', updateListbox);

        // Initial population of the listbox
        updateListbox();
    </script>
</body>
</html>