Question

给出以下select节点：

<select multiple="multiple">
     <option value="car">car</option>
     <option value="scooter">scooter</option>
     <option value="bus">bus</option>
</select>

如何在不使用 ctrl 键的情况下多选，在下使用？我想只使用 vanilla Javascript来实现这一点。谢谢！

Answer 1

这是一种方法......

(function(values,sel) {

  var sel = document.querySelector('select');
  values = new Array(sel.length);

  sel.addEventListener('click', function(e) {
    
    values[e.target.index] = !values[e.target.index];    
    for(var i=0;i<values.length;++i) {
      sel.options[i].selected = values[i];
    }

  });

})();

<select multiple="multiple">
     <option value="car">car</option>
     <option value="scooter">scooter</option>
     <option value="bus">bus</option>
</select>

...非脚本方式可以与checkbox的

一起使用

.check-multiple {
  display: inline-block;
  height: 60px;
  overflow-y: scroll;
  border: 1px solid gray;
}
.check-multiple input {
  display: none;
}
.check-multiple label {
  display: block;
}
.check-multiple span {
  display: inline-block;
  width: 100%;
}
.check-multiple input:checked ~ span {
  background: #03f;
  color: white;
}

<div class="check-multiple">
     <label><input value="car" type="checkbox"><span>car</span></label>
     <label><input value="scooter" type="checkbox"><span>scooter</span></label>
     <label><input value="bus" type="checkbox"><span>bus</span></label>  
</div>

Answer 2

我建议使用checkboxes。这些是支持选择多个选项的最佳HTML元素。

您可以在Javascript中编写自己的多选组件来镜像Chosen等热门库，但由于时间限制，我不推荐它。

如何在vanilla JS中处理多个下拉选择选项

2 个答案: