Every time I attempt to populate the select options into the optStored array using array push, the array remains empty. The code works fine in Chrome, Firefox, and Safari but not in Internet Explorer. Is there a workaround for this issue or is it something that cannot be resolved?
Updated 2:12am 10/11/16: Made some modifications to the code, previous code is now commented out but still facing the issue of the array remaining empty! Any solutions?
// array to store select options
var optStored = [];
// filter select
function filterFruits(el) {
var value = el.value.toLowerCase();
var form = el.form;
var opt, sel = form.fruits;
if (value == "") {
restoreOpts();
} else {
for (var i = sel.options.length - 1; i >= 0; i--) {
opt = sel.options[i];
if (opt.text.toLowerCase().indexOf(value) == -1) {
sel.removeChild(opt);
}
}
}
}
// Restore select options
function restoreOpts() {
var sel = document.getElementById('fruits');
sel.options.length = 0;
for (var i = 0, iLen = optStored.length; i < iLen; i++) {
// Recent Update 2:12am 10/11/16:
// Found aworkaround for restoring the select options
// This method works with versions of IE4+
sel.options[sel.options.length] = new Option(optStored[i].text, optStored[i].value, false, false);
// Recent Comment Update 2:12am 10/11/16:
// Console complains of a type mismatch error
// sel.add(optStored[i], null);
}
}
// Load select options
window.onload = function() {
var sel = document.getElementById('fruits');
for (var i = 0, iLen = sel.options.length; i < iLen; i++) {
// Recent Comment Update 2:12am 10/11/16:
// tried this method as well but no luck.
// it was also mentioned in the comments below
// the array still remains empty!
optStored[i] = sel.options[i];
//optStored.push(sel.options[i]);
}
};<form>
<input type="text" onkeyup="filterFruits(this);" placeholder="Filter">
<select id="fruits">
<option value="1">Apple</option>
<option value="2">Orange</option>
<option value="3">Cherry</option>
<option value="4">Banana</option>
</select>
</form>