javascript function isn't called in a XSLT document with IE_问答_开发者

With the help of a onchange event on a drop-down menu, I make that only the paragraph relevant to a category are displayed. It works on FF and Opera, but on IE 7 and IE 8 there is no change when selecting a new option on the drop-down menu, and only the default paragraph are displayed.

The javascript code does work as intended when inserted in a html document (only the wanted paragraph are displayed).

XSLT Code:

<?xml version='1.0' encoding='ISO-8859-1'?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:template match='/'>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>help center</title>
    <script type="text/javascript">
    <![CDATA[
        function showHide(selection) {
        var f = selection.form;
        var opt = selection.options[selection.selectedIndex].value;
        var divArray = document.getElementsByTagName("div");
        for (var i=0; i<divArray.length; i++){
            if(divArray[i].className == "first1"){
                if(opt=="first1"){
                    divArray[i].style.display = "";
                }else{
                    divArray[i].style.display = "none";
                }
            }
            if(divArray[i].className == "second2"){
                if(opt=="second2"){
                    divArray[i].style.display = "";
                }else{
                    divArray[i].style.display = "none";
                }
            }
            if(divArray[i].className == "third3"){
                if(opt=="third3"){
                    divArray[i].style.display = "";
                }else{
                    divArray[i].style.display = "none";
                }
            }
        }
        return false;
    }]]>
    </script>
    </head>
    <body style="font-family:arial;">
        <div id="header" style="background-color:#fffacd;">
        <h1>Help Center</h1>
        <noscript>
            <p><font color="red"><b>The Help Center require javascript for optimal use.</b></font></p>
        </noscript>
        <form>
            <select name="release" onchange="return showHide(this);">
                <option value="first1" selected="selected">first1</option>
                <option value="second2">second2</option>
                <option value="third3">third3</option>
            </select>
        </form>
        <br />
        </div>

        <hr />

        <xsl:for-each select="sections/section">
            <h2><xsl:value-of select='name'/></h2>    

            <div class="first1">
                <ul>
                    <xsl:for-each select="instructions/instruction[releases//release='first1']">
                        <li><xsl:value-of select="content"/></li>
                    </xsl:for-each>
                </ul>
            </div>

            <div class="second2" style="display:none;">
                <ul>
                    <xsl:for-each select="instructions/instruction[releases//release='second2']">
                        <li><xsl:value-of select="content"/></li>
                    </xsl:for-each>
                </ul>
            </div>

            <div class="third3" style="display:none;">
                <ul>
                    <xsl:for-each select="instructions/instruction[releases//release='third3']">
                        <li><xsl:value-of select="content"/></li>
                    </xsl:for-each>
                </ul>
            </div>
        </xsl:for-each>

    <hr />

    <p style="font-size:10px;background-color:#fffacd;"><br /></p>

    </body>
    </html>
</xsl:template>
</xsl:stylesheet>

XML Input

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="help.xsl"?>
<sections>
<section>
<name>First Section</name>
<instructions>
    <instruction>
        <releases>
            <release>first1</release>
            <release>second2</release>
        </releases>
        <content>
            Do first step
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>first1</release>
        </releases>
        <content>
            Do auxiallary step 1.5
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>second2</release>
        </releases>
        <content>
            no auxilliary step needed
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>first1</release>
            <release>second2</release>
        </releases>
        <content>
            Do second test.
            This step is important.
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>third3</release>
        </releases>
        <content>
            Do the first advanced step.
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>third3</release>
        </releases>
        <content>
            Do the second advanced step.
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>first1</release>
            <release>second2</release>
            <release>third3</release>
        </releases>
        <content>
            This开发者_Go百科 is a common step.
        </content>
    </instruction>
</instructions>
</section>
<section>
<name>Second section</name>
<instructions>
    <instruction>
        <releases>
            <release>first1</release>
            <release>second2</release>
            <release>third3</release>
        </releases>
        <content>
            This is some &lt;foo&gt;, where
            &lt;bar&gt; is important.
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>first1</release>
            <release>second2</release>
        </releases>
        <content>
            Foobar.
        </content>
    </instruction>
    <instruction>
        <releases>
            <release>third3</release>
        </releases>
        <content>
            Barfoo.
        </content>
    </instruction>
</instructions>
</section>
</sections>

I tried your sample with IE 8 on Windows XP, it pops up its error dialog with a syntax error. I think the reason/explanation is that your XSLT outputs an X(HT)ML document, not a HTML document. Mozilla and other browsers support that but with IE the problem is that its XSLT processor serializes the XSLT result according to XML rules and IE then tries to parse that with its HTML parser. So for the script code the HTML parser and the JScript engine of IE tries to parse for (var i=0; i<divArray.length; i++){ and that results in the syntax error. That way the complete script block is not parsed successfully and the function you want to use in the onchange handler is not defined. I suggest you fix the problem by avoiding XHTML completely and simply use XSLT (1.0) for what it can do best, namely output HTML. So drop the xmlns="http://www.w3.org/1999/xhtml" from your HTML root element, that way the code works without problems.