当前位置：首页 > JavaScript

js下拉实现多选

2026-03-16 01:54:53JavaScript

实现下拉多选的基本方法

使用HTML的<select>元素配合multiple属性可以创建基础的多选下拉菜单。用户需按住Ctrl（Windows）或Command（Mac）键进行多选。

<select multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

使用第三方库增强功能

对于更友好的交互体验，可以引入如select2或chosen等库。以select2为例：

安装库：

npm install select2

初始化多选：

import $ from 'jquery';
import 'select2';

$('select').select2({
  multiple: true,
  placeholder: '请选择'
});

自定义多选下拉组件

通过Vue/React等框架创建可搜索、带标签的多选组件。以React为例：

import { useState } from 'react';

function MultiSelect({ options }) {
  const [selected, setSelected] = useState([]);

  const toggleOption = (option) => {
    setSelected(prev => 
      prev.includes(option) 
        ? prev.filter(item => item !== option)
        : [...prev, option]
    );
  };

  return (
    <div className="multi-select">
      {selected.map(item => (
        <span key={item} className="selected-tag">
          {item}
        </span>
      ))}
      <select 
        multiple
        value={selected}
        onChange={(e) => toggleOption(e.target.value)}
      >
        {options.map(opt => (
          <option key={opt} value={opt}>{opt}</option>
        ))}
      </select>
    </div>
  );
}

样式优化技巧

为原生多选下拉添加CSS美化：

select[multiple] {
  min-height: 120px;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

select[multiple] option {
  padding: 8px;
  margin: 2px 0;
  background: #f5f5f5;
}

select[multiple] option:checked {
  background: #007bff;
  color: white;
}

获取选中值的JavaScript方法

监听change事件获取所有选中项：

js下拉实现多选

document.querySelector('select').addEventListener('change', function() {
  const selected = Array.from(this.selectedOptions)
                     .map(option => option.value);
  console.log(selected);
});