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

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

Контентная модель:

• Если у элемента есть атрибут label и атрибут value: Ничего.
• Если у элемента есть атрибут label, но нет атрибута value: Text.
• Если элемент не имеет атрибута метки и не является дочерним элементом элемента списка данных: Текст, не являющийся пробелом между элементами.
• Если элемент не имеет атрибута метки и является дочерним элементом элемента списка данных: Text.

Таким образом, в зависимости от контекста есть две вещи, которые вы можете поместить внутрь <option> — текст или вообще ничего — вы не можете поместить туда <span> или любой другой элемент.

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

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

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

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

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

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

option элемент

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

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

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

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

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

Это не ответ, но может кому поможет, можно имитировать select с тегом details. Этот пример неполный, я использовал javascript, чтобы закрыть список по клику

const items = document.querySelectorAll(".item");

// Add the onclick listeners.
items.forEach(item => {
  item.addEventListener("click", e => {
    // Close all details on page
    closeList(item);
  });
});

function closeList(item) {
  document.querySelectorAll("details").forEach(deet => {
    if (deet != this && deet.open) {
      deet.open = !open;
      console.log(item);
    }
  });
}

details {
    border: 1px solid #aaa;
    border-radius: 4px;
}

summary {
    padding: .5em 0 .5em .5em;
    font-weight: bold;
}

details[open] {
}
 
details[open] .item {
  cursor: pointer;
  padding: .5em 0 .5em .5em;
  border-top: 1px solid #aaa;
}
details[open] .item:hover{
  background-color: #f1f1f1;
}

details[open] .title{
   padding: .5em 0 .5em .5em;
     border-top: 1px solid #aaa;
}

<details>
	<summary>Select your choice</summary>
	<div class='title'>
		This is attempt to mimic native <code>select</code> tag with html for <code>option</code> tag
	</div>
	<div class='item'>item 1</div>
	<div class='item'>item 2</div>
	<div class='item'>item 3</div>
</details>