选择后多选上升

Posted 2023-02-18

【中文标题】选择后多选上升

【英文标题】：Multiple select goes up after selection

【发布时间】：2021-12-29 05:48:52

【问题描述】：

我正在使用 Google App Script 处理在 Google 表格中打开的 html 表单。

我在过滤器表单中使用了两个多重下拉菜单。当用户选择选项时，我使用了一个代码来避免 ctrl + 单击。过滤器有效，但有一个错误：当我向下滚动并选择一个选项时，该选项被选中，但下拉菜单会自动上升。

这是我的错误代码 (https://***.com/a/27578356/15994269)：

  // Allows to select mutiple options in a multiple select form without ctrl + click
  window.onmousedown = function (e) 
      var el = e.target;
      if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) 
          e.preventDefault();

          // Toggle selection
          if (el.hasAttribute('selected')) el.removeAttribute('selected');
          else el.setAttribute('selected', '');

          // Hack to correct buggy behavior
          var select = el.parentNode.cloneNode(true);
          el.parentNode.parentNode.replaceChild(select, el.parentNode);
      
  

我已经进行了一些研究来解决这个问题，并尝试将一些解决方案合并到我的代码中，我认为这些解决方案正在接近我正在寻找的东西：

https://***.com/a/27056015/15994269

https://***.com/a/60660662/15994269

但我没有成功。

感谢您的回答。

【问题讨论】：

只有在 Google Apps 脚本中使用时才会出现问题吗？

我没有测试。我只用 GS 编码

【参考方案1】：

我认为可能有更好的方法，但您可以尝试：

let selectTop;

window.onmousedown = function (e) 
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) 
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        selectTop = el.parentNode.scrollTop;
    


document.querySelector('select').addEventListener('scroll', (e) => 
  if (selectTop)  e.target.scrollTop = selectTop ;
  selectTop = 0;
);

<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>