javascript - 向上/向下移动时在窗口中保留所选选项

Question

我这里有一个 fiddle http://jsfiddle.net/BB3JK/47/我改编自上一个问题( How can I move selected option in multiselect up and down by buttons using jquery? )。

我实际上是用 AngularJS 编写代码，但我认为这个问题更基本。我有一个高度为 10 的选择框:

<select multiple id="selectedList" size="10">
    <option value="0">Chicago</option>
    <option value="1">Boston</option>
    <option value="2">Dallas</option>
    <option value="3">Atlanta</option>
    <option value="4">Yellow</option>
    <option value="5">Denver</option>
    <option value="6">Nashville</option>
    <option value="7">Orange</option>
    <option value="8">Baltimore</option>
    <option value="9">Crimson</option>
    <option value="10">Seattle</option>
    <option value="11">Orlando</option>
    <option value="12">Memphis</option>
    <option value="13">Cleveland</option>
    <option value="14">Phoenix</option>
    <option value="15">Amber</option>
</select>
<input type="button" value="Move Up">
<input type="button" value="Move Down">

我需要能够使用按钮上下移动选项。这一切都有效，但是当我将选项从上到下移动到底部时，它最终会消失在选择框下方(即选择丹佛，然后连续单击下移)，并且我希望选择框向下滚动并保留所选内容 View 中的选项。

奇怪的是，“上移”有效(即选择底部的琥珀色并“上移”)，但“下移”不起作用!

我尝试过将 jQuery 与 ScrollTop 和 AngularJS 指令一起使用，但尚未找到任何有效的方法。

Answer 1

您可以使用 JavaScript 滚动到所选选项:

document.getElementById("mySelect").selectedIndex = 6;

我不知道移动项目的代码是什么样的，但也许您可以将该行插入到某处。