Question

我找到两个线程来回答我使用什么代码的问题。但是我一直在这里和互联网的其余部分搜索，以演示如何让脚本运行。我几乎没有使用JavaScript的经验，这可能是我无法得到这个的原因。

主题： How to avoid the need for ctrl-click in a multi-select box using Javascript?

Selecting multiple from an html select element without using ctrl key

我想使用的代码是

<script>
$(document).ready(function(){
    $('select').mousedown(function(e){
        e.preventDefault();

        var select = this;
        var scroll = select.scrollTop;

        e.target.selected = !e.target.selected;

        setTimeout(function(){select.scrollTop = scroll;}, 0);

        $(select).focus();
    });
    $('select').mousemove(function(e){
        e.preventDefault();
    });
});
</script>

但是我不知道如何使用多选下拉菜单。我一直用来尝试找出如何使其工作的示例下拉：

<form id="AddProductForm" name="AddProductForm" method="POST">
<select id = "practice" name="practice" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

我不明白如何让脚本运行，以便当我点击其中一个选项时，我不需要按住ctrl来选择多个。

任何帮助都会非常感激。谢谢！！

编辑：

我一直在看两个链接，我有一个包含代码的页面，但是当我运行它时，我仍然需要按住ctrl才能选择多个选项。

Answer 1

javascript代码必须 AFTER 选择标记。将下一个代码复制粘贴到HTML文件中，然后在浏览器中打开它：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <select id="practice" name="practice" multiple>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select>

<script type = "text/javascript">
$(document).ready(function(){
    $('select').mousedown(function(e){
        e.preventDefault();

        var select = this;
        var scroll = select.scrollTop;

        e.target.selected = !e.target.selected;

        setTimeout(function(){select.scrollTop = scroll;}, 0);

        $(select).focus();
    });
    $('select').mousemove(function(e){
        e.preventDefault();
    });
});
</script>

  </body>
</html>

让JS脚本与多个选择下拉列表一起使用

1 个答案: