Iterating Over <select> Using jQuery + Multi Select
- by Kezzer
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?
