Html 将 <span /> 标签放在 <option /> 标签内是不好的，仅用于字符串操作而不是样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5678760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
It is bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?
提问by Rubens Mariuzzo
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:00can be modified, then the text in parenthesis (1 hour)can also be modified.
我想对<option />标签的文本内容进行分组。说我有以下内容：<option>8:00 (1 hour)</option>，时间模式8:00可以修改，那么括号中的文字(1 hour)也可以修改。
I was thinking of doing something like
我正在考虑做类似的事情
<option>
<span>8:00</span>
<span> (1 hour)</span>
</option>
It is bad to put <span />tags inside <option />tags, only for string manipulation not styling?
将<span />标签放在标签内是不好的<option />，仅用于字符串操作而不是样式？
回答by Quentin
From the HTML 4.01 spec:
来自 HTML 4.01 规范：
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
From the HTML 5 draft spec:
来自 HTML 5 草案规范：
Content model: Text.
内容模型：文本。
(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)
（即使是HTML 3.2和HTML 2规格说：<!ELEMENT OPTION - O (#PCDATA)*>）
An option element cannot have any child elements. So yes, it is bad.
选项元素不能有任何子元素。所以是的，这很糟糕。
回答by Ivan Yaremchuk
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.
您可以使用 Javascript 插件来克服此限制。例如jQuery插件“Select2” Select2插件主页。我在我的几个项目中使用它，并认为它非常灵活和方便。
There are a number of them, but they do quite same thing - convert traditional <select>into <div>blocks with an extra functionality.
它们有很多，但它们做的事情完全相同 - 将传统转换<select>为<div>具有额外功能的块。
回答by Josh Lee
Content model: Text
内容模型：文本
No, it's not ok. Consider keeping the values around in your script so you can recompose them when necessary.
不，这不行。考虑将这些值保留在脚本中，以便在必要时重新组合它们。
回答by Diodeus - James MacFarlane
You're better off using an HTML replacement for your <select>if you want to do this.
<select>如果你想这样做，你最好使用 HTML 替代品。
回答by dp4
As established by other people, and I have tried with <b>and other tags, <option>does not take tags within it.
正如其他人建立的那样，我已经尝试过使用<b>和其他标签，<option>在其中不带标签。
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.
您可以做什么，因为您不能 <span>在<option>标签内使用，
您可以使用索引号通过
document.getElementById(selectid).options[x].text提取文本，其中 x 是相关索引，作为变量。
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.
如果使用 for 函数，可以更改 select 的每个值，将 1 替换为 2、3 等，并放置一个设置的间隔函数来不断更新它。
回答by cdeszaq
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.
编辑的一种选择是使用一些花哨的模式匹配来更新内容。它会更慢，占用更多资源，并且取决于格式的规则程度，但不需要任何 HTML 修改。然而，我关心的是可访问性和用户体验。更改值对于屏幕阅读器软件来说很难接受，并且还可能使其他用户感到困惑。
回答by bFunc
It is not an answer, but may be it will help sombody, it is possible to mimic selectwith detailstag. This example is not complete, I used javascript to close list on click
这不是答案，但可能会帮助某人，可以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>