多个 select 在 selection 之后上升

Question

我正在使用 Google App Script 在 Google 张中打开一个 HTML 表单。

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

这是我的错误代码 () :

  // 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);
      }
  }

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

但是我没有成功

感谢您的回答。

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

多个 select 在 selection 之后上升

Multiple select goes up after selection

javascript

html

google-apps-script

html-select