如何实现根据第一个输入框动态筛选第二个输入框的选项

在前端表单交互开发中，根据第一个输入框的内容动态筛选第二个输入框的选项是很常见的需求，比如选择省份后自动筛选对应的城市选项，或者输入分类关键词后匹配对应的子分类。这种交互可以减少用户手动查找的时间，提升操作便捷性。

实现核心思路

整个功能的实现可以分为三个核心步骤：

• 给第一个输入框绑定input事件，实时获取用户的输入内容
• 准备第二个输入框的所有预设选项数据，通常存储在数组结构中
• 根据第一个输入框的内容过滤预设选项，将匹配的结果更新到第二个输入框中

完整代码示例

HTML结构

首先构建两个输入框的基础结构，第一个输入框用于输入筛选关键词，第二个输入框使用datalist配合input实现下拉选项效果，也可以根据需求替换为select标签。

<div class="filter-container">
    <label for="keywordInput">输入筛选关键词：</label>
    <input type="text" id="keywordInput" placeholder="请输入关键词">
    
    <label for="resultInput">匹配的选项：</label>
    <input type="text" id="resultInput" list="resultList" placeholder="自动匹配选项">
    <datalist id="resultList"></datalist>
</div>

JavaScript逻辑实现

接下来编写核心的筛选逻辑，首先定义第二个输入框的所有预设选项，然后监听第一个输入框的输入事件，每次输入变化时执行筛选操作。

// 第二个输入框的所有预设选项
const allOptions = ['苹果', '香蕉', '橘子', '葡萄', '西瓜', '草莓', '蓝莓', '芒果'];

// 获取两个输入框和datalist元素
const keywordInput = document.getElementById('keywordInput');
const resultList = document.getElementById('resultList');

// 监听第一个输入框的input事件
keywordInput.addEventListener('input', function() {
    // 获取用户输入的关键词，转为小写方便匹配
    const keyword = this.value.trim().toLowerCase();
    // 清空之前的选项
    resultList.innerHTML = '';
    
    // 如果关键词为空，不添加任何选项
    if (!keyword) {
        return;
    }
    
    // 过滤匹配的选项
    const matchedOptions = allOptions.filter(option => {
        return option.toLowerCase().includes(keyword);
    });
    
    // 将匹配的选项添加到datalist中
    matchedOptions.forEach(option => {
        const optionElement = document.createElement('option');
        optionElement.value = option;
        resultList.appendChild(optionElement);
    });
});

适配select标签的场景

如果第二个输入框需要使用select标签展示选项，只需要调整更新选项的逻辑即可，核心的筛选逻辑不需要修改。

<!-- 修改第二个输入框为select结构 -->
<label for="resultSelect">匹配的选项：</label>
<select id="resultSelect">
    <option value="">请选择</option>
</select>

// 获取select元素
const resultSelect = document.getElementById('resultSelect');
// 预设选项数据不变
const allOptions = ['苹果', '香蕉', '橘子', '葡萄', '西瓜', '草莓', '蓝莓', '芒果'];

keywordInput.addEventListener('input', function() {
    const keyword = this.value.trim().toLowerCase();
    // 清空select除了第一个默认选项之外的内容
    resultSelect.innerHTML = '<option value="">请选择</option>';
    
    if (!keyword) {
        return;
    }
    
    const matchedOptions = allOptions.filter(option => {
        return option.toLowerCase().includes(keyword);
    });
    
    // 将匹配的选项添加到select中
    matchedOptions.forEach(option => {
        const optionElement = document.createElement('option');
        optionElement.value = option;
        optionElement.textContent = option;
        resultSelect.appendChild(optionElement);
    });
});

注意事项

• 输入事件建议使用input而不是keyup，因为input可以监听到粘贴、拖拽输入等所有内容变化场景
• 筛选匹配时可以根据需求调整规则，比如改为开头匹配、完全匹配，或者支持多关键词匹配
• 如果预设选项数据量很大，可以考虑添加防抖处理，避免频繁执行筛选逻辑影响性能

JavaScriptinput动态筛选事件监听修改时间：2026-06-10 12:12:19