Question

我正在使用jQuery在页面加载时动态填充一些级联下拉控件。但是，当页面加载时，我的三个选择框中只有两个被识别。

考虑以下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>

当我在IE，Firefox或Chrome中打开此页面时，只会呈现两个选择框。三个中只有两个出现在DOM中（使用萤火虫或类似物），但所有三个都出现在源中。

如何显示所有控件？

Answer 1

撰写valid，HTML-compatible标记。

您的选择元素应具有显式结束标记和至少一个选项元素。

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

Answer 2

简单：编写有效的HTML代码。浏览器正在尽力解析无效的HTML，但有时它们只会扼杀它。

<select>不是自动结算标记，必须包含结束标记且至少有一个option或optgroup元素。

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

jsFiddle Demo

为什么DOM中不会显示多个HTML选择标记？

2 个答案: