EditjQuery: working with select options

Following my recent post on my rolechanger module, I started delving into how to provide functionality with the resulting dropdown box that the module provides. I wanted to provide all functionality through javascript and have included a rolechanger.js file for this purpose. However I found a few quirks while working with jQuery and the select element.

I started out with a .change() on the select element and drilled down through the .children() looking for [@selected]. However, thought this worked fine in IE, Firefox did not pick this up at all. I saw in the jQuery issues that this had been fixed, but evidently not for the release that ships with Drupal. Here's the resulting code for the IE portion:

    // ie doesn't pick up the option.click, so we'll have to use the select.change
    $('#edit-role-changer').change(function(){

// get rid of select box
$('#edit-role-changer').hide();

    // show the chosen role as static text
   // NOTE: FF doesn't pick up [@selected]
  $('#role').html($(this).children("[@selected]").text()).show();

  // provide a change link
  $('#role-change-back').show();

});

Firefox was actually a little easier to code for, since I found that it would pick up a .click() on the option element. So the resulting code for Firefox is this:

    // provide action for an option change
    $('#edit-role-changer option').click(function(){

  // get rid of select box
  $('#edit-role-changer').hide();

  // show the chosen role as static text
  $('#role').html($(this).text()).show();

  // provide a change link
  $('#role-change-back').show();

});

Since Firefox does pick up the .change() function that is on the select element that is used for IE, I then had to do a browsers detection, which jQuery makes simple as pie with $.browser. Here is the resulting full code:

  // see which browser we're working with
  if ($.browser.msie) {

// ie doesn't pick up the option.click, so we'll have to use the select.change
$('#edit-role-changer').change(function(){

  // get rid of select box
  $('#edit-role-changer').hide();

  // show the chosen role as static text
  // NOTE: FF doesn't pick up [@selected]
  $('#role').html($(this).children("[@selected]").text()).show();

  // provide a change link
  $('#role-change-back').show();

});

} else {

// provide action for an option change
$('#edit-role-changer option').click(function(){

  // get rid of select box
  $('#edit-role-changer').hide();

  // show the chosen role as static text
  $('#role').html($(this).text()).show();

  // provide a change link
  $('#role-change-back').show();

});

}

Happy jQuerying!

comments powered by Disqus