3

我有一个 select 元素，它上面有 multiple 属性。我使用 javascript 在列表中上下移动项目。

HTML：

<select id="sel" size="10" multiple>
    <option>1</option>
    <option>2</option>
     ...
    <option>14</option>
</select>
<span id="moveDown">Move Down</span>

以及以下 javascript：

$("#moveDown").button().click(function () {
    var select = $("#sel");
    var selItem = $("#sel option:selected")
    var next = selItem.last().next();
    selItem.insertAfter(next);
});

我遇到的问题是，在 Chrome 和 IE 中，如果将所选项目滚动到视图之外，则选择列表不会滚动以保持项目在视图中。Firefox 始终将最顶部的选定项目保留在视图中。

如果我删除了多个属性，那么一切都会按预期工作，但我需要能够为此列表的其他功能选择多个项目。

我的问题是，如何滚动到所选项目？我尝试过使用位置、偏移量和高度，但它们在 chrome 中的选项上都是 0：

console.log(selItem.position().top);
console.log(selItem.offset().top);
console.log(selItem.height());

这是一个演示该问题的小提琴：http: //jsfiddle.net/ywypB/4/

4

1 回答 1

1

很奇怪！一种方法是使用.scrollTop().

为什么不尝试这样的事情（我知道不理想但可能的解决方案）：

$("#moveDown").button().click(function () {
    var select = $("#sel");
    var selItem = $("#sel option:selected");
    var next = selItem.last().next();
    var index = selItem.insertAfter(next).index() + 1;
    if(index > $('#sel').attr('size')){
        $('#sel').scrollTop(17 * parseInt(index - $('#sel').attr('size'))); //17 is height of option
    }
});

演示：http: //jsfiddle.net/dirtyd77/ywypB/16/

于 2013-03-13T15:32:36.363 回答