0

This issue appears to be isolated to Internet Explorer:

I'm moving option tags from one select to another when they're double clicked using Javascript. The select elements can have many items, so I've set the height with overflow: auto; so that they scroll. If you scroll down the list and double click an item to move, the select list will scroll up to the top when the option is removed, instead of staying at the current scrolled-to position as it does in Chrome or Firefox.

I made a basic example to demonstrate this here: https://jsfiddle.net/yk8LeLbw/1/

The Javascript is pretty simple:

 $(".listBoxSelectorAvail").dblclick(function() {
     $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned");
 });
 $(".listBoxSelectorAssigned").dblclick(function() {
   $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail");
 });

I haven't been able to find any specific reason why this happens - I'm not sure if it's a bug or if this is expected behavior, but is there anything that can be done?

EDIT: made the title more clear

EDIT 2: I was hoping to stop the scrolling, but the best solution I've come up so far is to rescroll once the item has been moved, as seen here: https://jsfiddle.net/yk8LeLbw/2/

8
  • 1
    I'm using IE 11 and it seems to work as intended.
    – Brett
    Apr 22, 2016 at 13:09
  • Interesting - I'm using IE11 as well and it jumps to the top of the list for me.
    – jessikwa
    Apr 22, 2016 at 13:10
  • "...the list the selection was made from jumps up to the top in Internet Explorer, instead of holding it's place..." - What exactly does holding its place mean? It won't hold its place because it's removed and appended to another list.
    – Brett
    Apr 22, 2016 at 13:14
  • @Brett Sorry I didn't explain this clearly: I mean that that when you scrolling down in the select element and double click an item that the select scrolls back to the top of the list instead of staying at the scrolled-to position it was at. Updating the question.
    – jessikwa
    Apr 22, 2016 at 13:15
  • 1
    IE behaves differently. Browsers are like snowflakes, no two are alike. You may have to wrap the select in a div and use some CSS rules to let the div control the scrolling. Read this.
    – Brett
    Apr 22, 2016 at 13:23

1 Answer 1

1

The issue is that IE behaves differently. So, we have to work around that unwanted behavior. The solution is to wrap the select in a div and use some CSS.

Here's a working jsFiddle.

Note how I wrapped a div around each select and replaced the size="50" attribute with the multiple="true" attribute. This removes the scrollbar on the select elements.

$(document).ready(function() {
  var arr1 = [];
  var arr2 = [];
  arr1.push("<div class='scroll'><select class='listBoxSelectorAvail' multiple='true'>");
  arr2.push("<div class='scroll'><select class='listBoxSelectorAssigned' multiple='true'>");
  for (var i = 0; i < 20; i++) {
    arr1.push("<option value=\"" + i + "\">Option " + i + "</option>");
  }
  arr1.push("</select></div>");
  arr2.push("</select></div>");
  $("body").append(arr1.join(""));
  $("body").append(arr2.join(""));
  $(".listBoxSelectorAvail").dblclick(function(e) {
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned");
  });
  $(".listBoxSelectorAssigned").dblclick(function(e) {
    $(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail");
  });
});

Here's the modified CSS.

select {
  width: 200px;
  height: 200px;
}
.scroll {
  overflow: auto;
  display: inline-block;
  margin-left: 10px;
}
3
  • I like this better than forcing the rescroll - only problem I see is that the multiple="true" would allow for multiple selections rather than one at a time. This isn't in my fiddle, but I'm actually displaying information below the select elements based on the current selection, so this causes a bit of an issue for my specific case. Regardless I think it's the best solution, thank you!
    – jessikwa
    Apr 22, 2016 at 13:54
  • I see. I'm not sure if there's a better way to do it. You could use some jQuery to enforce that only one element is selected. Modifying select style and behavior across all browsers is notoriously difficult. That's why many UI frameworks simply construct their own dropdown lists from div's and input boxes instead of select's.
    – Brett
    Apr 22, 2016 at 14:00
  • Yeah, the situation isn't ideal but I think it's as good as it gets. I'm using jQuery UI in my solution, I'll check to see if there's anything there that may accommodate this better.
    – jessikwa
    Apr 22, 2016 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.