Плохо помещать теги <span/ "> внутри тегов <option/" >, только для строковых манипуляций, а не для стилизации?

Я хотел бы создать группы текстового содержимого тега <option />. Скажем, у меня есть следующее: <option>8:00 (1 hour)</option>, шаблон времени 8:00 может быть изменен, тогда текст в скобках (1 hour) также может быть изменен.

Я думал делать что-то вроде <option><span>8:00</span><span> (1 hour)</span></option>

Плохо помещать теги <span /> внутри тегов <option />, только для строковых манипуляций не стилирование?

+39
источник поделиться
6 ответов

Из спецификации HTML 4.01:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

Из черновика HTML 5:

Модель контента: Текст.

(Даже спецификации HTML 3.2 и HTML 2 говорят: <!ELEMENT OPTION - O (#PCDATA)*>)

Элемент option не может иметь дочерних элементов. Так что да, это плохо.

+69
источник

Вы можете использовать плагин Javascript для преодоления этого ограничения. Например, плагин jQuery "Select2" Главная страница плагина Select2. Я использую его в нескольких своих проектах и ​​считаю, что он довольно гибкий и удобный.

Есть несколько из них, но они делают то же самое - конвертируют традиционные <select> в <div> блоки с дополнительной функциональностью.

+5
источник
другие ответы

Связанные вопросы


Похожие вопросы

Элемент option

Модель контента: текст

Нет, это не нормально. Подумайте о сохранении значений в своем script, чтобы вы могли их перекомпоновать, когда это необходимо.

+2
источник

Вам лучше использовать замену HTML для <select>, если вы хотите это сделать.

+2
источник

Как установлено другими людьми, и я пробовал с <b> и другими тегами, <option> не принимает теги внутри него.

Что вы можете сделать, поскольку вы не можете использовать <span> внутри тега <option>,
Вы можете использовать номер индекса для извлечения текста через
document.getElementById(selectid).options [x].text, где x - соответствующий индекс, как переменная.

Затем вы используете "(", чтобы разделить переменную на время и удалить последний символ, который удаляет ")"

Пример:

    <script type="text/javascript">
    function extractSelectText()
    {
    var text = document.getElementById("main").options[1].text
    /* 
    var tlength = text.length
    var splitno = tlength - 1
    var text2 = text.slice(0, splitno)
    var textArray = text2.split(" )")
    var time = textArray[0]
    var hours = textArray[1]
    }
    </script>

Изменение намного проще:

    <script type="text/javascript">
    function changeSelectText()
    {
    /* add your code here to determine the value for the time (use variable time) */

    /* add your code here to determine the value for the hour (use variable hours) */
   var textvalue = time + " (" + hours + ")"
   document.getElementById("main").options[1].text
   }
   </script>

Если вы используете функцию for, вы можете изменить каждое значение select, заменяя 1 на 2, 3 и так далее, и поместить функцию заданного интервала для постоянного обновления.

+1
источник

Одним из вариантов для редактирования было бы использовать некоторое причудливое сопоставление шаблонов для обновления содержимого. Он будет медленнее и ресурсоемким, и зависит от того, насколько регулярным является формат, но не требует каких-либо модификаций HTML. Однако моя озабоченность связана с доступностью и опытом пользователей. Изменение значений сильно затрудняет загрузку программы чтения с экрана, а также может смутить других пользователей.

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос