如何使用JavaScript添加内置提交按钮的Multi Select Dropdown List

下面是贴合参考样式的完整实现方案，包含HTML结构、CSS样式和JavaScript交互逻辑：

HTML结构 #

<div class="multi-select-container">
  <!-- 下拉触发按钮 + 选中项显示 -->
  <button class="multi-select-trigger">
    <span class="selected-text">选择选项</span>
    <span class="arrow">▼</span>
  </button>
  <!-- 下拉面板 -->
  <div class="multi-select-dropdown">
    <div class="options-container">
      <label class="option-item">
        <input type="checkbox" value="option1">
        <span>选项1</span>
      </label>
      <label class="option-item">
        <input type="checkbox" value="option2">
        <span>选项2</span>
      </label>
      <label class="option-item">
        <input type="checkbox" value="option3">
        <span>选项3</span>
      </label>
      <label class="option-item">
        <input type="checkbox" value="option4">
        <span>选项4</span>
      </label>
    </div>
    <!-- 内置提交按钮 -->
    <button class="submit-btn">提交</button>
  </div>
</div>

CSS样式 #

/* 容器样式 */
.multi-select-container {
  position: relative;
  width: 250px;
  font-family: Arial, sans-serif;
}

/* 触发按钮样式 */
.multi-select-trigger {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.multi-select-trigger:hover {
  border-color: #888;
}

.arrow {
  font-size: 12px;
}

/* 下拉面板样式 */
.multi-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: none;
  flex-direction: column;
}

/* 选项容器 */
.options-container {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f0f0f0;
}

.option-item input {
  margin-right: 8px;
}

/* 提交按钮样式 */
.submit-btn {
  padding: 8px 15px;
  border: none;
  border-top: 1px solid #ccc;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #45a049;
}

/* 选中项文本样式 */
.selected-text {
  flex: 1;
}

JavaScript逻辑 #

const container = document.querySelector('.multi-select-container');
const triggerBtn = container.querySelector('.multi-select-trigger');
const dropdown = container.querySelector('.multi-select-dropdown');
const submitBtn = container.querySelector('.submit-btn');
const selectedText = container.querySelector('.selected-text');
const checkboxes = container.querySelectorAll('.option-item input');

// 展开/收起下拉面板
triggerBtn.addEventListener('click', () => {
  dropdown.style.display = dropdown.style.display === 'flex' ? 'none' : 'flex';
});

// 点击面板外部收起下拉
document.addEventListener('click', (e) => {
  if (!container.contains(e.target)) {
    dropdown.style.display = 'none';
  }
});

// 更新选中项显示文本
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateSelectedText);
});

function updateSelectedText() {
  const selectedOptions = Array.from(checkboxes)
    .filter(box => box.checked)
    .map(box => box.nextElementSibling.textContent);
  
  if (selectedOptions.length > 0) {
    selectedText.textContent = selectedOptions.join(', ');
  } else {
    selectedText.textContent = '选择选项';
  }
}

// 提交按钮逻辑
submitBtn.addEventListener('click', () => {
  const selectedValues = Array.from(checkboxes)
    .filter(box => box.checked)
    .map(box => box.value);
  
  if (selectedValues.length === 0) {
    alert('请至少选择一个选项');
    return;
  }

  // 替换为实际提交逻辑，比如发送AJAX请求
  console.log('提交的选项值:', selectedValues);
  
  // 提交后收起下拉面板
  dropdown.style.display = 'none';
});

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