如何处理香草JS中的多个下拉选择选项

How to handle multiple dropdown select option in vanilla JS

本文关键字：选项 选择 JS 何处理 处理 香草      更新时间：2023-09-26

给定以下select节点：

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

如何使用jQuery在不按ctrl键的情况下执行多选和在不按的情况下进行多选？我想只使用vanillaJavascript来实现这一点。谢谢

这里有一种方法。。。

(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>

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

您可以在Javascript中编写自己的多选组件来镜像Chosen等流行库，但由于时间问题，我不建议使用它。

相关文章：