(HTML) Do spans not work in select options?

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.

score 1 · Answer 1 · edited Apr 11 '17 at 15:52

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

edited Apr 11 '17 at 15:52

gen_Eric

223,194
41
299
337

answered Apr 11 '17 at 15:49

Guillaume

1,032
8
16

:0. Thanks, this is good to know going forward. I wish I'd realized, this is waaay easier than the malarkey I was trying to do. I don't have high enough rep for an Upvote but you guys earned one. – chilin686 May 31 '17 at 00:48
You're welcome ! You can't upvote but if my answer responds to your question, you can accept it. – Guillaume May 31 '17 at 07:32

score 0 · Answer 2 · edited May 23 '17 at 12:25

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

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.

score 0 · Answer 3 · edited May 23 '17 at 12:25

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>

(HTML) Do spans not work in select options?

3 Answers3