2017-04-11 43 views
0

我使用嘗試在選擇下拉產品輸出選項,我就包括這裏的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,但它們不一樣。謝謝。

回答

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

+0

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

+0

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

0

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

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

0

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>