CODEWITHSUNDEEP
htmldomxhtmlhtml-select
SpazDude
SpazDude

Reputation: 924

Why don't multiple HTML select tags show up in the DOM?

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?

Upvotes: 2

Views: 206

Answers (2)

kapa
kapa

Reputation: 78671

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 one option or optgroup element.

<select id="one"><option></option></select>
<select id="two"><option></option></select>
<select id="three"><option></option></select>

jsFiddle Demo

Upvotes: 5

Quentin
Quentin

Reputation: 943548

Write valid, HTML-compatible markup.

Your select elements should have explicit end tags and at least one option element.

<select id="one"><option>foo</option></select>
<select id="two"><option>foo</option></select>
<select id="three"><option>foo</option></select>

Upvotes: 6

Related Questions