上/下移动时将选择的选项保留在窗口中

Question

I have a fiddle here http://jsfiddle.net/BB3JK/47/ that I adapted from this previous question ( How can I move selected option in multiselect up and down by buttons using jquery? ).

I'm writing my code in AngularJS actually, but the issue is more basic I believe. I have a select box that is 10 high:

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

And I need to be able to move options up and down using buttons. That's all working, but when I move an option from the top down to the bottom, it eventually disappears below the select box (ie. select Denver and then continually click Move Down) and I want the select box to scroll down and keep the selected option in view.

The odd thing is that Move Up works (ie. select Amber at the bottom and Move Up), but Move Down doesn't!

I've tried using jQuery with ScrollTop and AngularJS directives and I haven't found anything that works yet.

Answer 1

You can use javascript to scroll to the selected option:

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

I don't know how the code that moves the items looks like but maybe you can insert that line in there somewhere.