Iterating Over <select> Using jQuery + Multi Select

Question

This isn't quite as straight forward as one may think. I'm using a plugin called jQuery MultiSelect and multiple <select> options using XSLT as follows:

<xsl:for-each select="RootField">
  <select id="{RootField}" multiple="multiple" size="3">
    <option value=""></option>
    <xsl:for-each select="ChildField">
      <option value="{ChildField}"><xsl:value-of select="ChildField"/></option>
    </xsl:for-each>
  </select>
</xsl:for-each>

The accompanying JavaScript is as follows:

var selects = document.getElementsByTagName("select");

$.each(selects, function() {
  $(this).multiSelect();
});

This allows me to apply the multiSelect(); function to every single <select> on the page.

The behaviour is quite strange, every other <select> is being changed into the dropdown list (all the even ones anyway). I can't see anything wrong in my JavaScript to cause this issue as it would iterate over every single one. To make it more clear, the only lists that have that JavaScript applied to it are ones in position 2, 4, 6 and 8 (out of the 9 which are on the page).

Any ideas?

Answer 1

I'd not heard the 'Halloween problem' tag before, but Robert may be correct.
The nodelist returned from getElementsByTagName is dynamic i.e. adding or removing, in this case selects, will change the nodelist after it has been created.

try

//hoping for magic here
$('select').multiSelect();

or

$('select').each( function() {
    $(this).multiSelect();
});

Answer 2

Sounds like a Halloween problem (http://blogs.msdn.com/mikechampion/archive/2006/07/20/672208.aspx) in multiSelect, but since I don't know multiSelect I can't say for sure.

Answer 3

Try this:

jQuery('select').each(function(){selectAll(this.id)});