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插件＆＃34; Select2＆＃34; Select2 plugin homepage。我在我的几个项目中使用它，并认为它非常灵活和方便。

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

Answer 3

The option element

内容模型：文字

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

Answer 4

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

Answer 5

正如其他人所建立的那样，我尝试使用<b>和其他代码，<option>不会在其中添加代码。

您可以执行的操作，因为您无法在<span>标记内使用<option> 您可以使用索引号通过
提取文本 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函数你可以改变选择替换1的每个值2,3等等，并设置一个设置间隔函数来不断更新它。

Answer 6

编辑的一个选项是使用一些奇特的模式匹配来更新内容。它将更慢，更耗费资源，并且取决于格式的规则程度，但不需要任何HTML修改。但是，我担心的是可访问性和用户体验。屏幕阅读器软件很难获得价值变化，也可能使其他用户感到困惑。

Answer 7

这不是一个答案，但可能会帮助身体，可以使用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>

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

7 个答案: