跳转到内容

Selectr下拉选择组件

1. 简介

Selectr 是一个轻量级、无依赖的开源 JavaScript 下拉选择 UI 组件。它能够将原生的 HTML <select> 标签包装成功能更丰富、样式更美观的下拉框，支持过滤搜索、多选及自定义模板渲染。

2. 核心特性

零外部依赖：不依赖 jQuery 或其他大型 JavaScript 框架。
轻量易用：核心资源体积较小，对首屏加载性能友好。
支持多选与搜索：提供内置的实时关键字检索与标签式多选管理。

3. 基础使用示例

<!-- 引入 Selectr 样式文件 -->
<link href="https://cdn.jsdelivr.net/npm/mobius1-selectr@latest/dist/selectr.min.css" rel="stylesheet" type="text/css">

<!-- HTML 声明 select 标签 -->
<select id="my-select" multiple>
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

<!-- 引入 Selectr JS 并初始化 -->
<script src="https://cdn.jsdelivr.net/npm/mobius1-selectr@latest/dist/selectr.min.js" type="text/javascript"></script>
<script>
  new Selectr('#my-select', {
    searchable: true, // 开启过滤搜索
    width: 300       // 设置下拉框宽度
  });
</script>

4. 参考资料