js下拉菜单多选

<select id="mySelect" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
</select>

#mySelect {
  width: 200px;
  height: 100px; /* 设置一个合适的高度以显示多个选项 */
}

document.getElementById('mySelect').addEventListener('change', function() {
  let selectedOptions = Array.from(this.selectedOptions);
  let selectedValues = selectedOptions.map(option => option.value);
  console.log(selectedValues);
});

const maxSelection = 3;
document.getElementById('mySelect').addEventListener('change', function() {
  if (this.selectedOptions.length > maxSelection) {
    alert(`最多只能选择${maxSelection}个选项`);
    this.selectedIndex = this.selectedIndex - 1; // 取消最后一个选择
  }
});

<div id="selectedOptionsDisplay"></div>

document.getElementById('mySelect').addEventListener('change', function() {
  let selectedOptions = Array.from(this.selectedOptions).map(option => option.text);
  document.getElementById('selectedOptionsDisplay').innerText = '已选择: ' + selectedOptions.join(', ');
});