Move Selected Option Up or Down - staying visible no longer works in IE11 or Edge?

Question

Here is a simple bit of htm/jquery that you can cut-and-paste into notepad and save and run on your desktop:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#moveup').click(function() {
  var opt = $('#sourceSelect option:selected');

  if(opt.is(':first-child')) {
    opt.insertAfter($('#sourceSelect option:last-child'));
  }
  else {
    opt.insertBefore(opt.prev());
  }
});
});

$(document).ready(function() {
$('#movedown').click(function() {

  var opt = $('#sourceSelect option:selected');

  if(opt.is(':last-child')) {
    opt.insertBefore($('#sourceSelect option:first-child'));
  }
  else {
    opt.insertAfter(opt.next());
  }
});
});
</script>
</head>
<body>
<select name="sourceSelect" id="sourceSelect" size="4">
  <option value="example1">Example1</option>
  <option value="example2">Example2</option>
  <option value="example3">Example3</option>
  <option value="example4">Example4</option>
  <option value="example5">Example5</option>
  <option value="example6">Example6</option>
  <option value="example7">Example7</option>
  <option value="example8">Example8</option>
  <option value="example9">Example9</option>
</select>

<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />
</body>
</html>

Select an item, click the move up or move down button and that item will ... well, move up or down!

The problem is that in IE or Edge, once you reach the bottom or top of the container, it "moves" out of sight. The container doesn't scroll.

Chrome, Firefox, Opera - all work fine.

I've tried multiple ways (in JQuery) to move up/down. I've tried scrollIntoView and scrollTop's. I need some way to keep the item visible.

Has anyone ran into this issue?

[scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) works just fine and you can check it [here](https://jsfiddle.net/dvfzb53k/1/)... maybe you tried it some other (wrong) way? — skobaljic, Jun 21 '19 at 21:58
@skobaljic - first off, thanks so much for your time. Thank you. My testing with that code you presented shows that it is still broken IE. I'm not ready to give up on IE yet! — JustLooking, Jun 21 '19 at 22:15

score 2 · Accepted Answer · answered Jun 22 '19 at 10:07

Did not want to mark it as a duplicate, because I had to spend some time and find this answer, which solves your IE issues. Also, it had no votes at all...

var showSelected = function(selector) {
    var thisSelect = $(selector);
    var thisIndex = thisSelect.find(":selected").index();
    var lastPos = 0;
    thisSelect.children().each(function() {
        lastPos++;
    });
    var currScrollPos = (thisIndex / lastPos) * parseInt(thisSelect[0].scrollHeight);
    thisSelect.scrollTop(currScrollPos);
}

$('#moveup').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':first-child')) {
        opt.insertAfter($('#sourceSelect option:last-child'));
    } else {
        opt.insertBefore(opt.prev());
    };
    showSelected("#sourceSelect");
});

$('#movedown').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':last-child')) {
        opt.insertBefore($('#sourceSelect option:first-child'));
    } else {
        opt.insertAfter(opt.next())[0];
    };
    showSelected("#sourceSelect");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sourceSelect" id="sourceSelect" size="4">
    <option value="example1">Example1</option>
    <option value="example2">Example2</option>
    <option value="example3">Example3</option>
    <option value="example4">Example4</option>
    <option value="example5">Example5</option>
    <option value="example6">Example6</option>
    <option value="example7">Example7</option>
    <option value="example8">Example8</option>
    <option value="example9">Example9</option>
</select>
<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />

Also on JSFiddle.

You are a God among men! Thank you. – JustLooking Jun 24 '19 at 21:59 — JustLooking, Jun 24 '19 at 21:59

Move Selected Option Up or Down - staying visible no longer works in IE11 or Edge?

1 Answers1