如何让无序列表（ul）实现类似select标签的多选功能

我明白你想要保留原生<ul>和<li>结构，同时让它们具备类似多选<select>的交互——点击选中/取消，能追踪选中项。下面是一个完整的纯前端实现方案：

1. 调整后的HTML结构 #

给你的列表加个容器方便样式控制，后续JS会用一个类来标记选中状态：

<div class="custom-select">
  <ul id="unorderedRight">
    <li value="1">edge Test</li>
    <li value="2">edgeTestSF</li>
  </ul>
</div>

2. CSS样式模拟Select外观 #

用CSS把列表改成类似下拉框的样式，同时给选中项添加高亮效果：

.custom-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  width: 200px;
  background-color: #fff;
  cursor: pointer;
}

#unorderedRight {
  list-style: none;
  margin: 0;
  padding: 0;
}

#unorderedRight li {
  padding: 6px 8px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

#unorderedRight li:hover {
  background-color: #f0f0f0;
}

/* 选中项的高亮样式 */
#unorderedRight li.selected {
  background-color: #007bff;
  color: #fff;
}

3. JavaScript实现多选交互逻辑 #

添加JS处理点击选中/取消，以及获取选中值的核心功能：

const list = document.getElementById('unorderedRight');
const items = list.querySelectorAll('li');

// 给每个列表项绑定点击切换选中状态的事件
items.forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('selected');
  });
});

// 自定义函数：获取所有选中项的value值
function getSelectedValues() {
  const selectedItems = list.querySelectorAll('li.selected');
  return Array.from(selectedItems).map(item => item.getAttribute('value'));
}

可选：模拟原生Select的展开/收起 #

如果需要和原生下拉框一样的展开收起效果，可以补充这段JS：

const selectContainer = document.querySelector('.custom-select');
// 初始化列表为收起状态
list.style.maxHeight = '0';
list.style.overflow = 'hidden';
list.style.transition = 'max-height 0.3s ease';

// 点击容器切换展开/收起
selectContainer.addEventListener('click', () => {
  list.style.maxHeight = list.style.maxHeight === '0px' ? '200px' : '0';
});

// 点击页面其他区域自动收起列表
document.addEventListener('click', (e) => {
  if (!selectContainer.contains(e.target)) {
    list.style.maxHeight = '0';
  }
});

功能说明 #

• 点击任意<li>即可切换选中/取消状态，和原生多选<select>的Ctrl+点击逻辑类似（如果需要严格模拟原生Ctrl多选，可以修改JS，判断点击时是否按住Ctrl键再切换状态）
• 调用getSelectedValues()函数就能获取所有选中项的value值，和原生select的selectedOptions功能一致
• 所有样式都可以根据你的需求自定义，比如修改边框颜色、选中时的背景色等

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