基于div与select2实现表格任务分配下拉选择组件

云原生阿岚

2026-9-2

需求说明

需要在项目所用表格中新增一列，实现任务指派人选择功能，效果参考如下：
需要对应功能的实现指导。

现有尝试代码

JavaScript 逻辑

var linha = ``; 

linha += `<tr id="5">
             <td class="text-center text-muted" style="vertical-align: middle;"><div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
      <input class="select2-search form-control form-control-sm" type="text" placeholder="search..."/>
      <div class="item">Option 1</div>
      <div class="item">Option 2</div>
    </div></div><div class="tooltip">Atribuir Membro</div></div></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

$(function() {
  
  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
  });
  
  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
  });
  
  $(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
  $(document).on('click', function(evt) {
    if ( $(evt.target).closest(".dropdown > .caption").length === 0 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
});

CSS 样式

.tooltip-demo {
    position: relative;
}

.tooltip {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .1s;
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: #333;
    color: #eee;
    padding: .25rem .75rem;
    white-space: nowrap;
    border-radius: 3.5px;
}

.most:hover ~ .tooltip,
.most:focus ~ .tooltip,
.most.active ~ .tooltip {
  opacity: 1;
  visibility: visible;
}

div.dropdown {
  position: relative;
}

div.dropdown > div.caption {
  padding: 11px 40px;
  border-radius: 3px;
  cursor: pointer;
}

div.dropdown > div.list {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  border-radius: 0 0 3px 3px;
  display: none;
  margin-top: 15px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

div.dropdown > div.list > div.item {
  padding: 11px 14px;
  cursor: pointer;
}

div.dropdown > div.list > div.item.selected {
  font-weight: bold;
}

div.dropdown > div.caption:hover,
div.dropdown > div.list > div.item:hover {
  color: #29a4f6;
}

div.dropdown.open > div.caption {
  border-radius: 3px 3px 0 0;
}

div.dropdown.open > div.list {
  display: block;
}

.select2 {
  position: relative;
}
.select2-list {
    display: none;
    position: absolute;
    max-height: 300px;
    overflow: overlay;
}
.select2-item:hover{
    background-color: #94adff31;
    cursor: default;
}

HTML 结构

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
  <thead>
      <tr>
        <th class="text-center col-2">Destinatário</th>
      </tr>
  </thead>
  <tbody>

  </tbody>
</table>

现存问题

当前代码运行异常：点击下拉列表内的搜索输入框时，下拉选项窗口会直接关闭，功能无法正常使用。

修复方案

问题根源

全局点击关闭下拉的判断逻辑存在缺陷：原有逻辑仅排除了点击下拉触发按钮（.dropdown > .caption）的场景，未将下拉面板（.dropdown > .list）内部的点击事件纳入排除范围，点击输入框时会被判定为外部点击，触发关闭逻辑。
此外，选中选项后直接替换caption的全部文本内容，会覆盖原有用户图标，属于体验类问题。

具体修改点

调整全局点击关闭的判断规则：只要点击位置在整个.dropdown容器外部，才执行关闭逻辑
打开下拉时自动聚焦搜索框，重置搜索内容显示全部选项
修正选项选中后的赋值逻辑，保留原有用户图标
补充搜索框的实时过滤功能，匹配人员搜索需求

修复后的JS逻辑

将原有JS代码替换为如下内容即可：

var linha = ``; 

linha += `<tr id="5">
             <td class="text-center text-muted" style="vertical-align: middle;"><div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
      <input class="select2-search form-control form-control-sm" type="text" placeholder="search..."/>
      <div class="item">Option 1</div>
      <div class="item">Option 2</div>
    </div></div><div class="tooltip">Atribuir Membro</div></div></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

$(function() {
  
  $('.dropdown > .caption').on('click', function() {
    $(this).parent().toggleClass('open');
    // 打开下拉时自动聚焦搜索框，重置内容
    $(this).siblings('.list').find('.select2-search').val('').focus();
    $(this).siblings('.list').find('.item').show();
  });
  
  $('.dropdown > .list > .item').on('click', function() {
    $('.dropdown > .list > .item').removeClass('selected');
    // 保留原有用户图标
    $(this).addClass('selected').parent().parent().removeClass('open').children('.caption').html(`<i class="pe-2x pe-va pe-7s-user"></i> ${$(this).text()}`);
  });
  
  $(document).on('keyup', function(evt) {
    if ( (evt.keyCode || evt.which) === 27 ) {
      $('.dropdown').removeClass('open');
    }
  });
  
  // 修正全局点击判断范围
  $(document).on('click', function(evt) {
    if ( $(evt.target).closest(".dropdown").length === 0 ) {
      $('.dropdown').removeClass('open');
    }
  });

  // 搜索实时过滤
  $('.select2-search').on('input', function(){
    const keyword = $(this).val().trim().toLowerCase();
    $(this).siblings('.item').each(function(){
      const itemText = $(this).text().toLowerCase();
      $(this).toggle(itemText.includes(keyword));
    })
  })
  
});

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

基于div与select2实现表格任务分配下拉选择组件

JavaScript 逻辑 #

CSS 样式 #

HTML 结构 #

问题根源 #

具体修改点 #