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 acpanying 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?

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 acpanying 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?

• javascript
• jquery
• multi-select

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 13, 2009 at 10:25 Kieran SeniorKieran Senior 18.2k2727 gold badges9696 silver badges139139 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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();
});

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

Try this:

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