"document type does not allow element "script" here" when attempting to validate my page.

Question

I'm working on get my site validated in an attempt to iron out issues with it showing up incorrectly on IE, and I'm getting an error: document type does not allow element "script" here. It's from me placing the <script> tag within the <select> tag on the javascript drop down menu form I have.

Is there any way to get this validated? Or any work arounds?

The site in question is Blue Devil Books

And the specific code snippit is:

<noscript>This site requires that Javascript is enabled on your browser!</noscript>
<select name="CLASS"><script type="text/javascript">dynlist.printOptions("CLASS")</script>
</select>&nbsp;
<select name="SEC"><script type="text/javascript">dynlist.printOptions("SEC")</script>   
</select>   

<input type="submit" value="Search" />
</form></div></div>

Answer 1

Select elements can contain only <option> elements. There is no way to make it valid without writing according to the spec.

You could write out the entire select element with JS but, frankly, I'd move the logic server side and remove the dependency on JS entirely.

Answer 2

Put your script outside the selects completely and then use innerHTML to modify their content. The following example assumes two things:

1) The name of the select element is always the same as the variable passed to printOptions e.g. if the name is "CLASS" then the contents should be printOptions("CLASS")

2) printOptions should be replaced with options which is an identical method except that instead of printing the options, it should instead return them.

<noscript>This site requires that Javascript is enabled on your browser!</noscript>
<select name="CLASS"></select>&nbsp;
<select name="SEC"></select>   

<input type="submit" value="Search" />
</form></div></div>

<script type="text/javascript">
    var selects = document.getElementsByTagName("select")
    for (i = 0; i < selects.length; i++) {
        var name = selects[i].getAttribute("name");
        var options = dynlist.options(name);
        selects[i].innerHTML = options;
    }
</script>