Question

I am using a dropdown to allow the user to sort search results. These results in a table but not all of the sortable criteria are represented by columns. The columns can be sorted by either clicking on the column header or using a ‘Sort By’ dropdown. The user can reverse the sort by clicking on the sorted columns header. I am trying to duplicate this functionality in the drop down but can’t get it to work in IE7/IE8.

The following is the existing code that works in both IE and Firefox. It changes the sorted column but not the sort direction.

$("#sortSelect").change(function() {
    //change sort
});

This is what I am trying to change it to and it works in Firefox. It changes the sorted column and if the sorted columns is already selected it will change the sort direction.

$("#sortSelect option").click(function() {
    //change sort
});

I was hoping someone would know of a way to trigger the option.click event or know of a good workaround.

Answer 1

To reiterate what T.J. Crowder said in the comments, this is an awkward change that you’re making to a user interface. That being said, it’s possible to distinguish between clicking on the select element and clicking on an option element if the select doesn’t have the multiple attribute set. Try out the following code in Internet Explorer:

$(document).ready(function ()
{
  $("#sortSelect").click(function (event) {
    if (event.offsetY > this.offsetHeight)
      $(this.options[this.selectedIndex]).click();
  });
  $("#sortSelect option").click(function (event)
  {
    alert('clicked option '+this.parentNode.selectedIndex);
  });
});

It works because when you click on an option element, the click event fires on the select element. By detecting that you’ve clicked outside the bounds of the select element checking event.offsetY > this.offsetHeight, you can use jQuery to trigger the click event of the currently selected option element.