Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

I would like to make groups of the text content of an <option /> tag. Say I have the following: <option>8:00 (1 hour)</option>, the time pattern 8:00 can be modified, then the text in parenthesis (1 hour) can also be modified.

I was thinking of doing something like

<option>
  <span>8:00</span>
  <span> (1 hour)</span>
</option>

Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

From the HTML 5spec:

> Content model: > * If the element has a label attribute and a value attribute: Nothing. > * If the element has a label attribute but no value attribute: Text. > * If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace. > * If the element has no label attribute and is a child of a datalist element: Text.

So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.

---

From the HTML 4.01 spec:

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

(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)

---

An option element cannot have any child elements. So yes, it is bad.

You can use a Javascript plugin to overcome this limitation. For example jQuery plugin "Select2" Select2 plugin homepage. I use it in a couple of my projects and think that it's pretty flexible and convenient.

There are a number of them, but they do quite same thing - convert traditional <select> into <div> blocks with an extra functionality.

> The option element > > Content model: Text

No, it’s not ok. Consider keeping the values around in your script so you can recompose them when necessary.

You're better off using an HTML replacement for your <select> if you want to do this.

As established by other people, and I have tried with <b> and other tags, <option> does not take tags within it.

What you can do, since you cannot use <span> inside an <option> tag,
You can use the index number to extract the text via
document.getElementById(selectid).options[x].text where x is the relevant index, as a variable.

Then what you do is use the " (" to split the variable into the time, and remove the last character as well which removes the ")"

Sample:

    <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>

Changing it is much simpler:

    <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>

If you use a for function you can change each value of the select replacing 1 with 2, 3 and so on, and put a set interval function to constantly update it.

One option for editing would be to use some fancy pattern matching to update the content. It will be slower and more resource intensive, and depends on how regular the format is, but doesn't require any HTML modifications. My concern, however, would be on accessibility and the user experience. Having values change is hard for screen reader software to pick up, and it may also confuse other users.

It is not an answer, but may be it will help sombody, it is possible to mimic select with details tag. This example is not complete, I used javascript to close list on click

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>