Question

我尝试在选择下拉列表中输出产品选项，我只是在这里包含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，因为它将用于计算产品的总成本。

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

我正在使用运行PHP 7.0.4和Apache 2.4.18的64位WAMP服务器。我也在使用bootsrap。我的问题与This one类似，但它们并不相同。感谢。

Answer 1

您可以像这样使用值属性：

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

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

Answer 3

与Guilaume's answer相同，但这里有一个代码片段来演示。

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

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>

（HTML）跨度不适用于选择选项吗？

3 个答案: