Hiding Drop Down Options

We recently were working on a development project where depending on what options a user selected we needed to hide values contained in a drop down list (the drop down list contained dates). The desire was to have the drop down filtered without posting back to the server. Our initial thought was to design the code to loop through the options and set the css visible property on the unneeded items to hidden so they would not be displayed. Something along the lines of:

Option[i].style.visibility='hidden'

Apparently the visibility property of drop down options is not uniformly editable so this didn’t work across various browsers. So we tried:

Option[i].style.display=’none’

Again no luck. The display property again is not uniformly editable via JavaScript across various browsers. A quick search on the web revealed there were various JavaScript development libraries out there to help address this issue but it seemed like overkill to have to implement an entire helper class in order to accomplish this simple functionality. Also most of the solutions we found to hide select options seemed either overly complicated or somewhat hacky.

After pondering the problem for a bit we decided to design our own code. The design consists of 3 main parts.

1. Code to store all the values from the drop down list in an array. This is important because depending on what the user does you may want to restore those values. 
2. A function to loop through the drop down list and filter any of the unneeded items. 
3. A function to restore the original values to the drop down list.

What follows is the final code – We hope it saves you some time!

<script type="text/javascript">
/* this is the ID of our drop down */
var dl = document.getElementById('ctl00_ContentPlaceHolder1_ddlDate')

/* this is the array to store our drop down values */
var dlarr = new Array(0)

/*add the items currently in the drop down to our array */
/* in a real environment this should be triggered onload */
for (optionCounter= 0;optionCounter<dl.length; optionCounter++)
{
dlarr.push(dl.options[optionCounter].value)
}

/* once we have our values stored we can hide them */
hidevals('1/1/2001','1/1/202')

/*call this function to restore the original values */
function restore() {
var obj=dl
for (i=0;dlarr.length > i; i++) {
obj.options[i] = new Option(dlarr[i], dlarr[i]);
}
}

function hidevals(indate, inenddate) {
/*before hiding, restore the original values */
restore()

var optionCounter;
var i=0;
//store the items we want to remove in this array
var arr = new Array(0);

for (optionCounter = 0; optionCounter < dl.length; optionCounter++)
{
var objdate = new Date(dl.options[optionCounter].value)
var indate2 = new Date(indate)
var inenddate2 = new Date(inenddate)

/* in this instance if the date in the drop down is less than our
start date or greater than our end date it is removed
this logic can be updated to meet your criteria
*/
if (objdate < indate2 || objdate > inenddate2) {
arr.push(optionCounter)
}
}
//loop through our array backwards and remove unwanted items
for (i = arr.length- 1; i>=0; i--) {
dl.remove(arr[i]);
}
}

</script>