（HTML）跨度在选择选项中不起作用吗？答案

【问题标题】：(HTML) Do spans not work in select options?（HTML）跨度在选择选项中不起作用吗？
【发布时间】：2017-04-12 00:11:52
【问题描述】：

我正在尝试在选择下拉列表中输出产品选项，我将在此处仅包含 HTML：

<div class="form-group">
  <label for="optSel">Select Option:</label>
  <select class="form-control" id="optSel">
    <option selected>Default</option>             
    <option>Kobalt Battery:$<span id='optPrc_1'>20.00</span></option>
  </select>
</div>

查看源代码后网页上的实际输出是相同的，只是跨度消失了。视觉上看起来是一样的。我需要为该价格提供一个 ID，因为它将用于稍后计算产品的总成本。

span 的 id 和其中的值是由 PHP 脚本输出的，但这与这个问题无关。我不能在选项中使用跨度吗？没有其他标签与选项兼容吗？如果不是，我将不得不在计算总数时使用正则表达式和 jQuery。

我正在使用运行 PHP 7.0.4 和 Apache 2.4.18 的 64 位 WAMP 服务器。我也在使用引导程序。我的问题类似于This one，但它们不一样。谢谢。

【问题讨论】：

标签： html select option

【解决方案1】：

你可以像这样使用 value 属性：

<div class="form-group">
    <label for="optSel">Select Option:</label>
    <select class="form-control" id="optSel">
        <option selected>Default</option>             
        <option value="20.00" id="optPrc_1">Kobalt Battery:$20.00</option>
    </select>
</div>

您稍后可以通过 jQuery 获取价格：$('#optPrc_1').val()

【讨论】：

:0。谢谢，很高兴知道继续前进。我希望我已经意识到，这比我试图做的那个更容易。我没有足够高的代表来投票，但你们赢得了一个。
不客气！你不能投票，但如果我的回答回应了你的问题，你可以接受。

【解决方案2】：

查看类似问题的答案：

https://stackoverflow.com/a/32661512/2084308

您可以使用无序列表来做到这一点：

<ul class="dropdown-menu">
  <li><a href="#">Action <span style='color:red'>like Super Man</span></a>
  </li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li role="separator" class="divider"></li>
  <li><a href="#">Separated link</a></li>
</ul>

用户使用引导程序，但如果您不想使用它，您可以使用自定义 css 设置列表样式，使其看起来像下拉菜单。不幸的是，根据您的示例，选项标签不允许您在其中包含子标签。

【讨论】：

【解决方案3】：

同Guilaume's answer，但这里有一个代码sn-p来演示。

您可以使用选项的 value 属性。

getOption = function() {
  var value = 'N/A',
      optNum = document.getElementById('optNumber').value,
      option = document.getElementById('optPrc_' + optNum);
  
  if(option && option.value) {
    value = option.value;
  }
  
  console.log(value);
}

<div class="form-group">
  <label for="optSel">Select Option:</label>
  <select class="form-control" id="optSel">
    <option selected>Default</option>             
    <option id='optPrc_1' value='20.00'>Kobalt Battery:$20.00</option>
    <option id='optPrc_2' value='23.12'>Duracell Battery:$23.12</option>
    <option id='optPrc_3' value='9.99'>Bobo Battery:$9.99</option>
  </select>
</div>

<br />
<div>
  <input type="number" min="1" max="3" value="1" id="optNumber" />
  <input type="button" value="Get Option Value" onclick="getOption()" />
</div>

【讨论】：