I have a form, one of the standard ones automatically generated for a SharePoint list, to which I add a layer of JavaScript to progressively enhance it. Some of the select boxes are lookups. On page load those select boxes include all the items in the lookup list when I only want a filtered subset.
I tried using CSS to hide the non-relevant options, but hiding options is not reliable across browsers. Instead, I use jQuery to modify the select box contents to include only the filtered subset I desire.
A problem arises, however, when the user navigates away from the page and then uses the back button to return. The value selections that IE restores to the select boxes are incorrect. You can see the problem that ensues when a user unaware of the mishap later saves the form.
It appears to me that IE is not anticipating my dynamic modifications to the select box. I believe IE is remembering the selections based on selectedIndex properties rather than the actually selected values.
There are no issues in Chrome which handles the above scenario wonderfully.
On backward navigation I log the select box selections the moment before I rebuild them and they are already incorrect.
Has anyone dealt with this issue in IE and overcome it?
Before you continue working on the front-end solution for filtering the lookup column, you might want to consider creating a calculated column in your target list, then point your lookup at that one.
Let's say your lookup column is pointing at the list "People" and the column "Age", but you only want your lookup to list ages under 30. Instead of looking up Age and using JS to remove all options over 30, create a second column in People called "Age_Under_30" or something similar. Make it a calculated column, using the formula =IF([Age]<30, [Age], ""). This will make its value equal to Age for all records where Age is under 30, and blank otherwise. Have your lookup column point to Age_Under_30 instead of Age, and it will only list the ages under 30 in your dropdown box.
You can change this as needed to whatever your column is; all that needs to be done is define your filter criteria in the calculated column.
If that's not possible, you can still fix it with JavaScript. Your assumption that IE stores the index of the selected option and not its DOM node or text is correct. Save the index that IE remembers when navigating back to the page before removing the unwanted options, then restore it.
var myselect = $("#myselect")[0],
saved_index = myselect.selectedIndex,
nodes_to_remove = $("#3, #4");
nodes_to_remove.remove();
if(myselect.selectedIndex + nodes_to_remove.length !== saved_index) {
myselect.selectedIndex = saved_index;
}
Since this problem does not occur in Chrome (and possibly other browsers) and applying this fix indiscriminately will break the behavior there, I put in a behavior check to only do this if the browser demonstrates the discrepancy. Let me know if you have any more problems with this.