Можете ли вы иметь несколько строк в элементе <option>?

Ответ 1

Это частный случай отображения тегов 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>). Я не могу найти, где он определяет поведение с пустым пространством, но большинство браузеров, похоже, сворачивают его.

Ответ 2

Это может быть не то, что вы хотите, но вы можете получить две строки для каждого параметра, используя тег "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>

Ответ 3

Проблема с select заключается в том, что они являются элементами формы ОС, а не элементами веб-формы. Вот почему в некоторых браузерах (кашель... IE6) невозможно стирать их в отличие от других входов. Вы видели пример этого где угодно? Поскольку операционная система не учитывает это, браузер также не будет.

Я бы также отметил, что он не очень удобен для пользователя. Пользователи привыкли к идее выбора блока, содержащего параметры в одиночных линиях. Если вы начнете размещать их на нескольких строках, вы будете идти против зерна удобство использования выбора и присущей ему доступности. Возможно, это не такая хорошая идея, чтобы пройти этот маршрут.

Просто мое мнение, но надеюсь, что это имеет смысл.

Ответ 4

Я не боюсь. Браузеры, похоже, игнорируют символы новой строки и теги HTML <br> внутри элементов <option>, и я не думаю, что JavaScript предоставляет какой-либо способ манипулировать тем, как выглядит этот текст.

Ответ 5

Нет, вам нужно будет создать настраиваемый выпадающий список для такой вещи.

jQuery предлагает множество из них; вы, вероятно, можете использовать CSS для определения height для определенных опций для достижения того, что вам нужно.