Question

我不想按住ctrl键单击即可从列表中选择多个内容。我想要的就是单击某些内容-它被选中。或再次单击-取消选择它。听起来超级简单，但我已经尝试了一段时间，但无法正常工作。这是我的清单的一个例子。选项列表是在加载时生成的，所以我不知道有多少个选项，但是如果我可以获取索引onclick并使用它来设置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>

Answer 1

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

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

global $wp_rest_server;
$request = new WP_Rest_Request('GET', '/wp/v2/posts');
$response = rest_do_request($request);
$response = $wp_rest_server->response_to_data($response, true);

Answer 2

这是答案的另一种选择。该代码执行以下操作：

当我在选项上按下鼠标按钮时，跟踪：

以前选择过吗？
选择了哪些选项？

然后，当我释放鼠标按钮时：

选择所有先前选择的选项，然后
如果先前选择了当前选项，请取消选择它。

与其他解决方案的最大区别在于，这些信息是使用jQuery提供的data()机制进行跟踪的。

$("#test option").on("mousedown", function() {
  var $me = $(this);
  $me.data("was-selected", $me.prop("selected"));
  $("#test").data("selected", $("#test").find("option:selected"));
}).on("mouseup", function() {
  var $me = $(this);
  $("#test").data("selected").prop("selected", true);
  $me.prop("selected", !$me.data("was-selected"));
});;

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

HTML多选择标记如何通过单击事件选择多个选项

2 个答案: