（HTML）跨區域在選擇選項中不起作用嗎？

我使用嘗試在選擇下拉產品輸出選項，我就包括這裏的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，因爲它將用於稍後計算產品的總成本。

範圍的id和它內部的值由PHP腳本輸出，但這與此問題無關。我不能在選項中使用跨度？有沒有其他標籤兼容選項？如果沒有，我將不得不求助於使用正則表達式來計算總數時使用jQuery。

我正在使用運行PHP 7.0.4和Apache 2.4.18的64位WAMP服務器。我也使用靴子。我的問題類似於This one，但它們不一樣。謝謝。

來源

2017-04-11 chilin686

你可以用值屬性那樣：

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

來源

2017-04-11 15:49:23 Guillaume

：0。謝謝，這是很好的知道未來。我希望我已經意識到，這比我想要做的事情更容易。我沒有足夠的代表Upvote的代表，但你們贏得了一個。 – chilin686

不客氣！你不能贊成，但如果我的答案回答你的問題，你可以接受它。 – Guillaume

看看這個回答類似的問題：

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將列表設置爲類似下拉菜單的樣式。不幸的是，根據您的示例，選項標籤不允許您在其中包含子標籤。

來源

2017-04-11 15:54:25

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

來源

2017-04-11 16:11:52 fqhv

（HTML）跨區域在選擇選項中不起作用嗎？

回答

相關問題