如何使用HTML和JS/JQuery实现图中所示的多选下拉组件？

核心功能实现逻辑 #

• 组件分为两个核心区域：输入展示区、下拉选项区
• 点击输入展示区触发下拉选项区的显示/隐藏切换
• 维护一个已选选项数组，每次选中新选项时更新该数组
• 渲染下拉列表时，判断当前选项是否存在于已选数组中，存在则添加disabled禁用样式与状态
• 输入展示区动态渲染已选数组内的所有选项，支持单独删除已选条目

前端核心代码示例（Vue3 版本） #

<template>
  <div class="multi-select">
    <!-- 输入展示区 -->
    <div class="select-input" @click="showDropdown = !showDropdown">
      <span v-for="item in selectedList" :key="item.value" class="selected-tag">
        {{ item.label }}
        <span @click.stop="removeSelect(item.value)">×</span>
      </span>
      <span class="placeholder" v-if="selectedList.length === 0">请选择选项</span>
    </div>
    <!-- 下拉选项区 -->
    <div class="dropdown" v-if="showDropdown">
      <div 
        v-for="item in optionList" 
        :key="item.value" 
        class="dropdown-item"
        :class="{ disabled: selectedList.some(s => s.value === item.value) }"
        @click="selectOption(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 模拟选项数据，可根据实际业务替换
const optionList = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 },
  { label: '选项4', value: 4 }
])
const selectedList = ref([])
const showDropdown = ref(false)

// 选中选项逻辑
const selectOption = (item) => {
  if (selectedList.value.some(s => s.value === item.value)) return
  selectedList.value.push(item)
}

// 移除已选选项逻辑
const removeSelect = (value) => {
  selectedList.value = selectedList.value.filter(s => s.value !== value)
}
</script>

<style scoped>
.multi-select {
  width: 300px;
  position: relative;
}
.select-input {
  min-height: 36px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.selected-tag {
  background: #ecf5ff;
  color: #409eff;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.selected-tag span {
  cursor: pointer;
}
.placeholder {
  color: #909399;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  z-index: 999;
}
.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
}
.dropdown-item:hover {
  background: #f5f7fa;
}
.dropdown-item.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background: #f5f7fa;
}
</style>

上述实现逻辑不依赖特定框架，原生JS、React等技术栈都可以参考该思路复现相同效果。

内容的提问来源于stack exchange，提问作者Nyxshield