(HTML) Do spans not work in select options? - html

Question

I'm using trying to output options for products in a select dropdown, I'll just include the HTML here:
<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>
Actual output on web page after viewing source is the same except the spans are gone. Visually it looks the same. I need to give that price an ID as it is going to be used to calculate the total cost of a product later.
The id for the span and the value inside of it are output by a PHP script, but that's irrelevant to this problem. Am I not able to use spans in options? Are there no other tags compatible with option? If not I'll have to resort to using regex with using jQuery when I calculate the total.
I'm using a 64 bit WAMP server running PHP 7.0.4 and Apache 2.4.18. I'm also using bootsrap. My question is similar to This one but they're not the same. Thanks.

Answer 1

You can just use value attribute like that :
<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>
And you will be able to get the price later with jQuery by : $('#optPrc_1').val()

Answer 2

Check out this answer to a similar question:
https://stackoverflow.com/a/32661512/2084308
You can do it by using an unordered list:
<ul class="dropdown-menu">
<li>Action <span style='color:red'>like Super Man</span>
</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
The user uses bootstrap but if you don't want to use that, you could style the list to appear like a dropdown using custom css. Unfortunately, the option tags will not allow you to have child tags in them, per your example.

Answer 3

Same as Guilaume's answer, but here is a code snippet to demonstrate.
You can use the option's value attribute.
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>