# mulselect

**Repository Path**: csxlin/mulselect

## Basic Information

- **Project Name**: mulselect
- **Description**: 轻量版的下拉多选，原生支持
- **Primary Language**: JavaScript
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-05-25
- **Last Updated**: 2026-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, multi-select, dropdown, select, Frontend

## README

# mulselect

#### 介绍
**mulselect** 是一个**轻量级下拉多选组件**，基于原生 JavaScript 实现，**无任何第三方依赖**，适合快速集成到各类 Web 项目中。

✅ 原生 JS  
✅ 体积小  
✅ 使用简单  
✅ 兼容性好   

#### 软件架构

mulselect/
├── index.js        # 核心逻辑
├── style.css       # 默认样式
└── README.md       # 项目说明


- 基于原生 DOM API
- 不依赖 jQuery / Vue / React
- 支持同时实例化多个选择器 

#### 安装与使用

##### 1️⃣ 引入资源
通过 `script` 标签引入： 
 
<link rel="stylesheet" href="mulselect.css">
<script src="mulselect.js"></script> 

##### 2️⃣ 基础使用

 
<input type="text" id="personInput" placeholder="请选择人员">

 
const personSelect = new MultiSelect(
  'personInput',
  ['111', '222', '333']
);

 

##### 3️⃣ 带配置项的使用

 
const citySelect = new MultiSelect(
  'cInput',
  ['北京', '上海', '广州'],
  {
    placeholder: '请选择城市',
    width: '200px'
  }
);
 

#### API 说明

| 方法 | 说明 | 示例 |
|----|----|----|
| `setSelectedValues(arr)` | 设置选中值 | `personSelect.setSelectedValues(['111', '222'])` |
| `getSelectedValues()` | 获取选中值 | `personSelect.getSelectedValues()` |
| `getSelectedText()` | 获取选中文本 | `personSelect.getSelectedText()` |
| `selectAll()` | 全选 | `citySelect.selectAll()` |
| `clearAll()` | 清空选择 | `citySelect.clearAll()` |
| `reloadData(arr)` | 重新加载数据 | `personSelect.reloadData(['新数据1', '新数据2'])` |
| `destroy()` | 销毁实例 | `personSelect.destroy()` |

 

#### 完整示例
 
基本使用示例
const personSelect = new MultiSelect('personInput', [
  '111',
  '222',
  '333'
]);

带配置的示例
const citySelect = new MultiSelect('cInput', [
  '111',
  '222'
], {
  placeholder: '请选择...',
  width: '200px'
});

设置选中值
personSelect.setSelectedValues(['111', '222']);

获取选中结果
console.log('选中的值:', personSelect.getSelectedValues());
console.log('选中的文本:', personSelect.getSelectedText());

全选 / 取消全选
citySelect.selectAll();
citySelect.clearAll();

重新加载数据
personSelect.reloadData(['新数据1', '新数据2']);

销毁插件
personSelect.destroy();

 
#### 配置项说明

| 参数 | 类型 | 默认值 | 说明 |
|----|----|----|----|
| `placeholder` | String | `请选择` | 输入框占位提示 |
| `width` | String | `100%` | 组件宽度 |
| `maxHeight` | String | `200px` | 下拉面板最大高度 |

 

#### 参与贡献

1. Fork 本仓库
2. 新建 `Feat_xxx` 分支  
   bash
   git checkout -b Feat_xxx

3. 提交代码  
   bash
   git commit -m "feat: add xxx feature"

4. 新建 Pull Request

 

#### TODO（后续计划）

- [ ] 支持搜索过滤
- [ ] 支持禁用选项
- [ ] 支持多选数量限制
- [ ] 支持表单校验
- [ ] TypeScript 类型声明 

#### 特技 & 相关资源

- 使用 `Readme_en.md`、`Readme_zh.md` 支持多语言文档
- Gitee 官方博客：[blog.gitee.com](https://blog.gitee.com)
- Gitee 开源探索：[gitee.com/explore](https://gitee.com/explore)
- GVP 项目介绍：[gitee.com/gvp](https://gitee.com/gvp)
- Gitee 使用手册：[gitee.com/help](https://gitee.com/help)
- Gitee 封面人物：[gitee.com/gitee-stars](https://gitee.com/gitee-stars)