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!