I’m using jQuery to dynamically populate some cascading drop-down controls when a page loads. However, only two of my three select boxes are being recognized when the page loads.
Consider the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title> </head> <body>
<select id="one" />
<select id="two" />
<select id="three" /> </body> </html>
When I open this page in IE, Firefox, or Chrome, only two of the select boxes are rendered. Only two of the three show up in the DOM (using firebug or similar), but all three show up in the source.
What can I do to have all the controls show up?
Simple: write valid HTML code. Browsers are trying their best to parse invalid HTML, but sometimes they simply choke on it.
<select>is not a self-closing tag, it must have a closing tag and at least oneoptionoroptgroupelement.jsFiddle Demo