Tags 放置<；span/>；内部标签<；选项/>；标记，仅用于字符串操作而不用于样式设置？

我想对

标记的文本内容进行分组。假设我有以下内容：

8:00（1小时）

，可以修改时间模式

8:00

，然后还可以修改括号中的文本

（1小时）

我在考虑做类似的事情

8:00
（1小时）

---

将

标记放在

标记中是否不好，仅用于字符串操作而不是样式设置？

编辑的一个选项是使用一些奇特的模式匹配来更新内容。它将更慢、资源更密集，这取决于格式的规则性，但不需要任何HTML修改。然而，我关心的是可访问性和用户体验。更改值对于屏幕阅读器软件来说很难识别，而且可能会混淆其他用户。

来自：

内容模型：

• 如果元素具有标签属性和值属性：Nothing
• 如果元素有标签属性但没有值属性：Text
• 如果元素没有label属性并且不是datalist元素的子元素：则文本不是元素间空白
• 如果元素没有label属性并且是datalist元素的子元素：Text

因此，根据上下文的不同，有两种东西可以放在

中-文本或什么都不放-不能放

或任何其他元素

---

从HTML 4.01规范：

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

（甚至HTML3.2和HTML2规范也说：

）

---

选项元素不能有任何子元素。所以，是的，这很糟糕

内容模型：文本

---

不，不好。考虑在你的脚本中保留这些值，这样你就可以在必要的时候重新编译它们。

如果你想这样做，你最好用HTML替换来代替<代码> <代码>。< /P> < P>其他人建立的，并且我已经尝试过<代码> <代码>和其他标签，<代码> <代码>不带标签。

由于不能在

标记内使用

，您可以做什么，
您可以使用索引号通过
document.getElementById（selectid）.options[x]。文本，其中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>

函数extractSelectText（）
{
var text=document.getElementById（“主”）.options[1]。text
/* 
var t长度=text.length
var splitno=t长度-1
var text2=text.slice（0，splitno）
var textArray=text2.split（“”）
变量时间=文本数组[0]
var小时数=文本数组[1]
}

更改它要简单得多：

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

函数changeSelectText（）
{
/*在此处添加代码以确定时间值（使用可变时间）*/
/*在此处添加代码以确定小时值（使用可变小时）*/
var textvalue=time+“（“+hours+”）”
document.getElementById（“main”）.options[1]。文本
}

---

如果您使用for函数，您可以更改select的每个值，将1替换为2、3等等，并放置一个set interval函数来不断更新它。

您可以使用Javascript插件来克服此限制。例如jQuery插件“Select2”。我在我的几个项目中使用它，并且认为它非常灵活和方便

---

它们有很多，但它们做的事情是完全相同的——将传统的

转换成具有额外功能的

块。

这不是答案，但可能会有帮助，因为可以用

详细信息
标记模拟
选择
。这个例子并不完整，我使用javascript在单击时关闭列表


const items=document.queryselectoral（“.item”）；
//添加onclick侦听器。
items.forEach（item=>{
item.addEventListener（“单击”，e=>{
//关闭第页上的所有详细信息
关闭列表（项目）；
});
});
功能关闭列表（项目）{
document.queryselectoral（“详细信息”）.forEach（deet=>{
如果（deet！=此&&deet.open）{
deet.open=！open；
控制台日志（项目）；
}
});
}
详细信息{
边框：1px实心#aaa；
边界半径：4px；
}
总结{
填充：.5em 0.5em.5em；
字体大小：粗体；
}
详情[公开]{
}
详细信息[打开]。项目{
光标：指针；
填充：.5em 0.5em.5em；
边框顶部：1px实心#aaa；
}
详细信息[打开]。项目：悬停{
背景色：#f1f1；
}
详细信息[打开]。标题{
填充：.5em 0.5em.5em；
边框顶部：1px实心#aaa；
}

选择你的选择
这是为了模仿本机
选择
标记，并在
选项
标记中添加html
项目1
项目2
项目3
每一个包含表单的版本。@SébastienGarcia Roméo-答案的最后一句解释了突出部分。尽管如此，大多数浏览器都能正确地从内部提取文本。不幸的是，我们不能依赖这种行为，因为它是非标准的。将字形图标添加到选项中会很有帮助，但我想HTML5不支持包含字形的选项标记=/