JavaScript/jQuery - Get value of span of current element

Question

So I have some <select> elements and each of its possible options have a price inside span. I loop through all select tags and I need to get the value of the span of the selected option for each of them. So this is my code

 <select class="form-control config-option" id="s{{ $availableCategory->index}}">
   <option>{{ $availableCategory->default_option }}</option>
     @foreach($availableOptions as $availableOption)
           @if($availableOption->category->name == $availableCategory->name)
                 <option>({{ $availableOption->code }}) {{ $availableOption->name }} <span class="option-price">({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})</span></option>
           @endif
     @endforeach
 </select>

I tried to access it via the find() function of jQuery by class and by tag name but I fail to do so.

$('.config-option').each(function() {
     var currentElement = $(this);
     var optionPrice = currentElement.find('.option-price');
     console.log(optionPrice);
 });

If I console log optionPrice.val() I get undefined. So how can I access this span? Is there a better way to do it? A solution using plain JavaScript would do as well.

Possible duplicate of [Get value of Span Text](http://stackoverflow.com/questions/10343838/get-value-of-span-text) — thatOneGuy, May 13 '16 at 12:55

David D · Accepted Answer · 2016-05-13T13:21:49.423

1

you shouldn't place tags inside option tag, that said try this

$('.config-option').each(function() { 
    var currentElement = $(this);
    var optionPrice = currentElement.find('.option-price').parent().text(); 
    console.log(optionPrice); 
});

updated: span tags get removed by browser so use this markup structure

<select>
    <option data-price="PRICE_HERE">

then use this in js

$('.config-option option:selected').each(function() { 
    var optionPrice = $(this).attr('data-price');
    console.log(optionPrice); 
});

edited May 13 '16 at 13:21

answered May 13 '16 at 13:01

David D

1,269
17
22

Yeah I just noticed that they get removed when I inspected in my browser. – Codearts May 13 '16 at 13:03
you can give the option a class. see updated answer. – David D May 13 '16 at 13:04
Wouldn't this produce the same result just like currentElement.val(); ? – Codearts May 13 '16 at 13:12
That would give you the selected option only. – David D May 13 '16 at 13:14
I just tested it and it works exactly the way I wanted! I totally forgot I could add a custom attribute to my option tag. Thanks! – Codearts May 13 '16 at 13:26

gavgrif · Answer 2 · 2016-05-13T12:55:10.813

0

spans don't have a value attribute (only inputs have that) so you need to get the .text() from the span

       $('.config-option').each(function() {
        var currentElement = $(this);
        var optionPrice = currentElement.find('.option-price').text();
        console.log(optionPrice);
    });

but why don't you just loop through and pick up the .option-price's specifically?

   $('.option-price').each(function() {
    var optionPrice = $(this).text();
    console.log(optionPrice);
});

edited May 13 '16 at 12:55

answered May 13 '16 at 12:51

gavgrif

15,194
2
25
27

I just tried it and I get an empty string even though it has a price inside it. – Codearts May 13 '16 at 12:54

score 0 · Answer 3 · answered May 13 '16 at 12:54

0

optionPrice.val() is for input fields.

You need to call optionPrice.text() instead of this.

Try this

console.log(optionPrice.text());

answered May 13 '16 at 12:54

Jitendra Tiwari

1,651
3
14
28

may be your `span` don't have any data. – Jitendra Tiwari May 13 '16 at 12:56
what is the result of `console.log(optionPrice);`? – Jitendra Tiwari May 13 '16 at 12:58
I noticed that It is empty because when I inspected the span tag in the option tag vanishes. – Codearts May 13 '16 at 13:06
then I think your condition, `@if($availableOption->category->name == $availableCategory->name)` will never satisfied. – Jitendra Tiwari May 13 '16 at 13:11

score 0 · Answer 4 · answered May 13 '16 at 12:57

Can you add value to option of select box, then you will be easily get the value as

<select class="form-control config-option" id="s{{ $availableCategory->index}}">
    <option>{{ $availableCategory->default_option }}</option>
    @foreach($availableOptions as $availableOption)
        @if($availableOption->category->name == $availableCategory->name)
            <option value="({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})">({{ $availableOption->code }}) {{ $availableOption->name }} <span class="option-price">({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})</span></option>
        @endif
    @endforeach
</select>

Script

$('.config-option').each(function() {
    var currentElement = $(this);
    // Now you will be able to use val() function
    var optionPrice = currentElement.find('.option-price').val();
    console.log(optionPrice);
});

JavaScript/jQuery - Get value of span of current element

4 Answers4