How to fix slow scrolling of all options in a list of multiple lists in Internet Explorer 9
I need to provide a button that allows users to select all options in a multiple list selection box.
I am using jQuery to select parameters.
In Internet Explorer 9, after clicking the button, the browser displays a slow scrolling effect in all options.
Sample Code and Slow Scrolling http://jsfiddle.net/willdurman/4b7avgmm/12/
This effect is not present in recent versions of Firefox or Chrome.
How can you eliminate this slow scrolling effect?
Requiring the user to first show the list box with no options selected, then can select individual options or all options.
// Abbreviated list of 10 options
<select id="lb" multiple="multiple">
<option value="0">item number 0</option>
<option value="1">item number 1</option>
<option value="2">item number 2</option>
<option value="3">item number 3</option>
<option value="4">item number 4</option>
<option value="5">item number 5</option>
<option value="6">item number 6</option>
<option value="7">item number 7</option>
<option value="8">item number 8</option>
<option value="9">item number 9</option>
</select>
<input type='button' id='selectAll' value ='Select All'/>
// jQuery to select all options
$(document).ready(function() {
$('#selectAll').click(function(e) {
$("#lb option").prop("selected",true);
});
});
source to share
My latest implementation was much simpler. I just wrap up the selection process with jQuery hide / show.
$(document).ready(function() {
$('#selectAll').click(function(e) {
$('#lb').hide();
$("#lb option").prop("selected",true);
$('#lb').show();
});
});
JSFiddle: http://jsfiddle.net/4b7avgmm/17/
source to share
I found that while the scrolling effect is less noticeable on newer, faster machines, it is still present.
After a lot of searching, I found this question Dynamically selects all items in a Multi-Select list using jquery . I adapted the code to work with my example code:
var selectAllButton = document.getElementById('selectAll');
var listbox = document.getElementById('lb');
$(selectAllButton).click(function() {
selectAllOptions(listbox);
});
function selectAllOptions(listbox) {
var select = $(listbox);
var clone = select.clone();
$('option', clone).attr('selected', true);
var html = clone.html();
select.html(html);
}
Here's an updated JSFiddle http://jsfiddle.net/willdurman/4b7avgmm/19/ . This approach does not cause scrolling in Internet Explorer 9.
source to share