时间戳

首页 > 解决方案 > HTML多选标签如何通过点击事件选择多个选项

jquery - HTML多选标签如何通过点击事件选择多个选项

问题描述

我不想通过 ctrl+click 来从列表中选择多个内容。我想要的只是单击某些东西-它已被选中。或再次单击 - 它被取消选择。听起来超级简单，但我已经尝试了一段时间，但我无法让它工作。这是我的清单的一个例子。选项列表是在加载时生成的，所以我不知道有多少选项有，但如果我可以在点击时获取索引并使用它来设置 selected=true 那么这将解决我的问题。如果有人可以提供帮助。

选择列表的示例。

  <select id="test" multiple>
      <option selected value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
  </select>
  <script>
     $("#test option").click(function () {

        //ToDo
    });
  </script>

标签： jqueryhtml

解决方案

注意：Ctrl 键和拖动鼠标进行多项选择不适用于此代码:(

var selections;
$("#test").mousedown(function(e) {
  selections = $(this).val();

}).click(function() {

  if (selections == null) {
    var selected = -1;
    selections = [];
  } else
    var selected = selections.indexOf($.isArray($(this).val()) ? $(this).val()[$(this).val().length - 1] : $(this).val());

  if (selected >= 0)
    selections.splice(selected, 1);
  else
    selections.push($(this).val()[0]);

  $('#test option').each(function() {
    $(this).prop('selected', selections.indexOf($(this).val()) >= 0);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" multiple>
  <option selected value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

推荐阅读