jquery 不按CTRL键选择选项后滚动位置跳跃

nhaq1z21 于 2023-03-17 发布在 jQuery

关注(0)|答案(1)|浏览(96)

我正在尝试编写我的网站代码，以便用户可以选择多个选项，而无需按住ctrl。我有一个当前的解决方案，让我选择多个选项，但似乎每当我选择一个选项在我的窗口下的默认尺寸的方块，滚动跳回到顶部。
我已经找到了this solution，但是很多更可靠的答案似乎在JQuery中，但是我想坚持使用普通的JS。页面下方提供的纯JS解决方案给了我一个关于element部分未定义的错误，这是为什么？

element.onmousedown= function(event) {
    //this == event.target
    event.preventDefault();
    var scroll_offset= this.parentElement.scrollTop;
    this.selected= !this.selected;
    this.parentElement.scrollTop= scroll_offset;
}
element.onmousemove= function(event) {
    event.preventDefault();
}

这是我现在使用的代码

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', '');
    }
}

我也看到过一些关于ScrollTop的评论，但是每当我试图实现它时，我都会收到错误消息，说它没有定义。
这里有几个jsfiddles，它们模拟了我的目标，但是在JQuery中：
Example 1
Example 2
我对javascript的了解相当业余，所以我可能错过了这里明显的东西。任何帮助都将不胜感激。

jquery

来源：https://stackoverflow.com/questions/75758522/scroll-position-jumping-after-selecting-options-without-ctrl

1条答案

按热度按时间

llmtgqce1#

纯粹的普通JS示例。

你应该像下面这样做。

var options = document.querySelectorAll('#WOStatusKey option');
for (const item of options) {
item.addEventListener("mousedown", function(e) {
    e.preventDefault();
    var originalScrollTop = this.parentElement.scrollTop;
    this.selected = this.selected ? false : true;
    var self = this;
    this.parentElement.focus();
    setTimeout(function() {
        self.parentElement.scrollTop = originalScrollTop;
    }, 0);
    
    return false;
});
}

<select multiple id="WOStatusKey" name="WOStatusKey" style="width:200px;">                
        <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>
        <option value="10">10</option>
        <option value="11">11</option>
    </select>

我认为没有必要解释代码.这很简单

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 不按CTRL键选择选项后滚动位置跳跃

1条答案

相关问题

热门标签

最新问答