将 <span /> 标签放在 <option /> 标签内是否很糟糕，只用于字符串操作而不是样式？

Posted 2023-02-23

【中文标题】将 <span /> 标签放在 <option /> 标签内是否很糟糕，只用于字符串操作而不是样式？

【英文标题】：Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?将 <span /> 标签放在 <option /> 标签内是不是很糟糕，只用于字符串操作而不是样式？

【发布时间】：2011-08-06 10:21:24

【问题描述】：

我想将<option /> 标记的文本内容分组。假设我有以下：<option>8:00 (1 hour)</option>，时间模式8:00可以修改，那么括号中的文字(1 hour)也可以修改。

我正在考虑做类似的事情

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

将<span /> 标签放在<option /> 标签内是不是很糟糕，只用于字符串操作而不是样式？

【问题讨论】：

在选项中添加字形图标会很有帮助，但我猜 html 5 不支持选项标签包含字形 =/

【参考方案1】：

来自the HTML 5spec：

内容模型：

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

因此，根据上下文，您可以在 <option> 中放入两件事 — 文本或根本不放入 — 您可能不会在其中放入 <span> 或任何其他元素。

---

来自 HTML 4.01 规范：

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

（甚至 HTML 3.2 和 HTML 2 规范都说：<!ELEMENT OPTION - O (#PCDATA)*>）

---

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

【讨论】：

每个版本都包含表单。

@SébastienGarcia-Roméo — 答案的最后一句话解释了突出的部分。

不过，大多数浏览器会正确地从 中的 中提取文本。不幸的是，我们不能依赖这种行为，因为它是非标准的。

【参考方案2】：

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

它们有很多，但它们的作用完全相同 - 将传统的 <select> 转换为具有额外功能的 <div> 块。

【参考方案3】：

The option element

内容模型：文本

不，这不好。考虑在脚本中保留这些值，以便在必要时重新组合它们。

【参考方案4】：

如果您想这样做，最好使用 HTML 替换您的 <select>。

【参考方案5】：

根据其他人建立的，我已经尝试使用<b>和其他标签，<option>不带标签。

您可以做什么，因为您不能在 <option> 标记内使用 <span>， 您可以使用索引号通过提取文本 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 修改。然而，我担心的是可访问性和用户体验。屏幕阅读器软件很难接受值的变化，而且还可能使其他用户感到困惑。

【参考方案7】：

这不是一个答案，但可能会对某人有所帮助，可以用details 标签模仿select。此示例不完整，我使用 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>