CODEWITHSUNDEEP
javascriptjquerymulti-select
Kieran Senior
Kieran Senior

Reputation: 18220

Iterating Over <select> Using jQuery + Multi Select

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?

Upvotes: 0

Views: 7648

Answers (3)

Sarika Patil
Sarika Patil

Reputation: 1

Try this:

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

Upvotes: 0

meouw
meouw

Reputation: 42140

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

Upvotes: 4

Robert MacLean
Robert MacLean

Reputation: 39261

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.

Upvotes: 2

Related Questions