У вас может быть несколько строк в элементе <option>?

Question

Есть ли способ иметь несколько строк в элементе <option>?

Как это:

 -------------------------
| Normal <option> element |
 -------------------------
| <option> element broken |
| onto two lines          |
 -------------------------
| Normal <option> element |
 -------------------------

Есть ли какой-либо подход к HTML / CSS или я должен использовать JavaScript?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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