很难将标记放在 标记内，仅用于字符串操作而不是样式？

Question

我想对<option />标签的文本内容进行分组。说我有以下内容：<option>8:00 (1 hour)</option>，可以修改时间模式8:00，然后也可以修改括号(1 hour)中的文本。

我正在考虑做类似的事情

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

仅将<span />标签放在<option />标签内是不好的，仅用于字符串操作而不是样式设置？

Answer 1

根据HTML 4.01规范：

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

摘自HTML 5规范草案：

内容模型：文字。

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

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

Answer 2

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

它们有很多，但是它们做同样的事情-使用额外的功能将传统的<select>转换为<div>块。

Answer 3

The option element

内容模型：文本

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

Answer 4

如果您想这样做，最好用HTML替代option。

Answer 5

由其他人建立，并且我尝试过使用<select>和其他标签，<b>内没有标签。

您可以做的，因为您不能在<option>标签内使用<span>，您可以使用索引号通过以下方式提取文本document.getElementById（selectid）.options [x] .text，其中x是相关索引，作为变量。

然后，您要做的是使用“（”将变量拆分为时间，并同时删除最后一个字符，从而删除“）”

示例：

<option>

更改它要简单得多：

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

如果使用for函数，则可以更改select的每个值，将它们替换为2、3等，然后放置一个设置间隔的函数以不断更新它。

Answer 6

一种选择是使用一些精美的样式匹配来更新内容。它将变得更慢，更耗费资源，并且取决于格式的常规程度，但是不需要任何HTML修改。但是，我的关注点在于可访问性和用户体验。屏幕阅读器软件很难更改值，这也可能使其他用户感到困惑。

Answer 7

这不是一个答案，但可能会帮助他人，可以使用

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

标签来模仿select。这个例子是不完整的，我用javascript关闭了点击列表>

details
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;
}