Има ли начин да има няколко реда в елемент <option>?
Като този:
-------------------------
| Normal <option> element |
-------------------------
| <option> element broken |
| onto two lines |
-------------------------
| Normal <option> element |
-------------------------
Има ли някакъв HTML/CSS подход или трябва да използвам JavaScript?
Това е частен случай на показване на HTML тагове вътре в елемент <option></option>. Доколкото знам, браузърите се държат много различно в тази област (Firefox показва дори изображения, други браузъри игнорират повечето или всички тагове) и няма решение за кръстосани браузъри. Вероятно ще трябва да го емулирате с JavaScript и различно маркиране.
На http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html казват:
Разрешено съдържание: нормални символни данни
... което е дефинирано на http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
Спецификацията е трудна за разбиране, както обикновено, но разбирам, че не можете да вмъкнете литерал < (т.е. HTML таг като <br>). Не мога да намеря къде определя поведението с празно пространство, но повечето браузъри изглежда го свиват.
Това може да не е това, което искате, но можете да получите два реда на опция, като използвате маркера „optgroup“, напр.:
<select>
<optgroup label="Click below for 'yes'">
<option value="yes">Yes</option>
</optgroup>
<optgroup label="Click below for 'No'">
<option value="no">No</option>
</optgroup>
</select>
Проблемът с select е, че те са елементи на формуляр на OS, за разлика от елементите на уеб формуляр. Ето защо не е възможно да ги стилизирате в някои браузъри (cough... IE6) за разлика от други входове. Виждали ли сте пример за това някъде? Тъй като операционната система не поддържа това, браузърът също няма да го направи.
Също така бих посочил, че не е много удобен за потребителя. Потребителите са свикнали с идеята за поле за избор, съдържащо опции на единични редове. Ако започнете да ги поставяте на няколко реда, вие се противопоставяте на използваемостта и присъщата достъпност на полето за избор. Може да не е толкова добра идея да поемете по този маршрут.
Само мое мнение, но се надявам да има смисъл.
Страхувам се, че не. Браузърите изглежда игнорират символите за нов ред и HTML <br> таговете в <option> елементи и не мисля, че JavaScript предоставя някакъв начин за манипулиране на начина, по който се появява този текст.
Не, ще трябва да създадете персонализиран падащ списък за такова нещо.
jQuery предлага много от тях; вероятно можете да използвате CSS, за да дефинирате height за конкретни опции, за да постигнете това, от което се нуждаете.
