i have added a script tag in side a select tag which creates options dynamically. The function works fine but the W3C validator gives me 4 errors regarding this syntax. It will be helpful if you guys could find me a solution for this problem.
These are the 2 errors that repeat 2 times.
1. document type does not allow element "script" here
2. year_option(); end tag for "select" which is not finished
i have added a script tag in side a select tag which creates options dynamically. The function works fine but the W3C validator gives me 4 errors regarding this syntax. It will be helpful if you guys could find me a solution for this problem.
These are the 2 errors that repeat 2 times.
1. document type does not allow element "script" here
2. year_option(); end tag for "select" which is not finished
Share Improve this question edited Mar 12, 2013 at 6:30 Kiran 3,1335 gold badges25 silver badges38 bronze badges asked Mar 12, 2013 at 6:19 Prasad SampathPrasad Sampath 331 gold badge1 silver badge5 bronze badges 2- 2 To debug your markup, it would help if you posted your markup. – Ayman Safadi Commented Mar 12, 2013 at 6:22
-
I'm glad you use the W3C validator. It would be wise to listen to what it says "document type does not allow element
scripthere". So move that<script>block out of your<select>tag. It should go in the<head>– Amy Commented Mar 12, 2013 at 6:25
3 Answers
Reset to default 21) the only tags that <select> can have are <option> and <optgroup> tags
the validator is plaining because <script> is not one of those things -- the browser is doing its best to take your invalid markup and turn it into something valid, so despite the fact that it works, that's why you get the error, if you're actually putting <script> tags inside of a <select>
2) your script tags should be at the bottom of your page, and instead of using document.write to put option tags there, use DOM methods to add options to the select element after the fact
<select name="select-box"></select>
<!-- ...rest of page... -->
<script src="external-script.js"></script>
/* contents of external-script.js */
var select_box = document.querySelector("select[name=select-box]"),
bob_opt = document.createElement("option"),
doug_opt = document.createElement("option");
bob_opt.value = "Bob";
doug_opt.value = "Doug";
bob_opt.appendChild(document.createTextNode("Bob"));
doug_opt.appendChild(document.createTextNode("Doug"));
select_box.appendChild(bob_opt);
select_box.appendChild(doug_opt);
There are faster and neater, or more-elaborate or more flexible ways of doing this, but this is closer to the "right way" than something like:
<select>
<script>document.write("<option value=\"" + i + "\">one</option>");</script>
</select>
Or whatever you might currently have there. JS is not meant to be templated like that, without using/writing a templating library for that purpose.
1) Script tags should be located in head, or perhaps elsewhere in the document, but not inside select tags
2) Looks like you are missing a tag, or perhaps its having problems finding it because of the first error.
You can put your JavaScript out side the select tag, and you can append option tags later, when select tag is rendered on the page, after page load using $(document).ready.
You can standardize your code by placing JavaScript in separate file, there you can do like
$(document).ready(function(){
//Your code to init all things,
//e.g. load options in select box etc..
//so It will be easy later to maintain the code, all init code will go here
});
Or if you are not using jquery, you can use below code
function your_function(){
//your init code will go here
}
document.getElementsByTagName("body")[0].onLoad = your_function;
that's it, place your code in your_function()
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745350272a4623791.html
评论列表（0条）