（HTML）是否在“选择选项”中不起作用？

我正在尝试在选择下拉列表中输出产品选项，我将在此处包括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

---

我使用的是运行PHP7.0.4和Apache2.4.18的64位WAMP服务器。我也在使用bootsrap。我的问题类似于，但它们不一样。谢谢。

您可以这样使用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

查看类似问题的答案：

您可以使用无序列表执行此操作：

<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将列表样式设置为下拉列表。不幸的是，根据您的示例，选项标记不允许您在其中包含子标记。

与相同，但这里有一个代码片段要演示

可以使用选项的“值”属性

getOption=函数{ 变量值='不适用'， optNum=document.getElementById'optNumber'。值， option=document.getElementById'optPrc_'+optNum； ifoption&&option.value{ value=option.value； } console.logvalue； } 选择选项： 违约 Kobalt电池：20.00美元 Duracell电池：23.12美元 波波电池：9.99美元

---

：谢谢，很高兴知道下一步该怎么办。我希望我已经意识到，这比我试图做的那些胡说八道要容易得多。我没有足够高的支持率来投票，但你们赢得了一个。不客气！你不能投票，但如果我的回答回应了你的问题，你可以接受。