2012-05-01 1 views
2

Я использую jQuery для динамического заполнения некоторых каскадных выпадающих элементов управления при загрузке страницы. Однако при загрузке страницы распознаются только два моих трех блока выбора.Почему в DOM не отображаются несколько тегов выбора HTML?

Рассмотрим следующий 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 (используя firebug или аналогичный), но все три отображаются в источнике.

Что я могу сделать, чтобы отобразить все элементы управления?

+0

Какие два из трех появятся? – Tim

+0

вот пример jsfiddle: http://jsfiddle.net/SWJ42/ –

+0

Спасибо за пример jsfiddle. хороший инструмент! – SpazDude

ответ

5

Простой: напишите правильный 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

+0

Все элементы могут быть выражены с помощью самозакрывающегося синтаксиса в XHTML (если у них нет требуемых дочерних элементов, которые выбирают элементы). Это просто не совместимо с HTML. – Quentin

+0

@Quentin просмотреть исходный код этой страницы: http://www.webdevout.net/articles/beware-of-xhtml-examples/6.html В нем говорится, что он действительный XHTML, и у него есть doctype XHTML, но он неверно. – gcochard

+0

@ Грег - Да? Это показывает, что я сказал. Допустимый, но не совместимый с HTML. – Quentin

6

valid Запись, HTML-compatible разметки.

Ваши элементы должны иметь явные конечные теги и по крайней мере один элемент опции.

<select id="one"><option>foo</option></select> 
<select id="two"><option>foo</option></select> 
<select id="three"><option>foo</option></select> 
Смежные вопросы