如何在javascript中过滤下拉菜单

<input type="text" id="filterInput" placeholder="输入过滤条件">
<select id="dropdown">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
  <option value="5">选项5</option>
</select>

// 获取输入框和下拉菜单元素
var filterInput = document.getElementById('filterInput');
var dropdown = document.getElementById('dropdown');

// 监听输入事件
filterInput.addEventListener('input', function() {
  // 获取过滤条件
  var filterValue = filterInput.value.toLowerCase();

  // 遍历所有选项元素
  for (var i = 0; i < dropdown.options.length; i++) {
    var option = dropdown.options[i];
    var optionText = option.text.toLowerCase();

    // 判断选项是否包含过滤条件
    if (optionText.includes(filterValue)) {
      option.style.display = ''; // 显示选项
    } else {
      option.style.display = 'none'; // 隐藏选项
    }
  }
});