CODEWITHSUNDEEP
jqueryinternet-explorerhtml-selectmicrosoft-edge
JustLooking
JustLooking

Reputation: 2486

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

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?

Upvotes: 0

Views: 118

Answers (1)

skobaljic
skobaljic

Reputation: 9634

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.

Upvotes: 2

Related Questions