3

multiple 属性を持つ select 要素があります。リスト内のアイテムを上下に移動するには、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 は、常に一番上にある選択された項目を表示します。

multiple 属性を削除すると、すべてが期待どおりに機能しますが、このリストの他の機能のために複数のアイテムを選択できる必要があります。

私の質問は、選択したアイテムにスクロールするにはどうすればよいですか? 位置、オフセット、高さを使用してみましたが、クロムのオプションではすべて 0 です:

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

問題を示すフィドルは次のとおりです。http://jsfiddle.net/ywypB/4/

4

1 に答える 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 に答える