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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Элемент option

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

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

Ответ 4

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

Ответ 5

Как установлено другими людьми, и я пробовал с <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 и так далее, и поместить функцию заданного интервала для постоянного обновления.

Ответ 6

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