Get selected option's text in an HTML select using jQuery

Question

I have a html below. How can I get the text of second tag i.e. "Frame Size".

<div class="productOptionViewSelect">
    <div class="selector fixedWidth" id="uniform-08876c63593c0928fefc45101870c7b0"><span style="-webkit-user-select: none;">Frame Size</span><select class="validation" id="08876c63593c0928fefc45101870c7b0" name="attribute[1318]">
        <option value="">-- Please Select --</option>

                    <option value="2527">Frame Size</option>
                    <option value="206">10x15 (4x6 in)</option>
            </select></div>
</div>


<div class="productOptionViewSelect">
        <div class="selector fixedWidth" id="uniform-08876c63593c0928fefc45101870c7b0"><span style="-webkit-user-select: none;">Frame Size</span><select class="validation" id="08876c63593c0928fefc45101870c7b0" name="attribute[1318]">
            <option value="">-- Please Select --</option>

                        <option value="252">Photo Size</option>
                        <option value="206">10x20 (4x6 in)</option>
                </select></div>
    </div>

I can get the value of the select by

$('.productOptionViewSelect').find('select').val();

But this will not fulfill my requirement. Any option can be selected so i can't use above jQuery.

Edit

If i have same block twice with different sets of option than how can i get the second option of each block? In this case i want Frame Size and Photo Size but in every event call it only returns Frame Size . Any help would be appreciated.

score 1 · Answer 1 · answered Apr 22 '15 at 08:43

1

Use this

$('.productOptionViewSelect').find('select option:selected').text()

It will give you the text inside of the <option>

answered Apr 22 '15 at 08:43

leopik

2,323
2
17
29

n-dru · Accepted Answer · 2015-04-22T09:41:03.983

1

You cannot use selector like this:

$('.productOptionViewSelect option:eq(1)')

because in this result set only one of those options will have index 1 - the index of the second option in second .productOptionViewSelect div will get the index equal to the index of the last option in first div plus 2.

Therefore yo should iterate over those 2 sets of options and use .text():

$('.productOptionViewSelect').each(function(){
    console.log($(this).find('option:eq(1)').text());
});

Output:

Frame Size
Photo Size

edited Apr 22 '15 at 09:41

answered Apr 22 '15 at 08:43

n-dru

9,285
2
29
42

I always want second option.so option:selected couldn't be used. – Navin Bista Apr 22 '15 at 08:55
OK, I see, I edited back, but I don't know what selector to choose for your another set - just change class name or whatever to match it. – n-dru Apr 22 '15 at 08:56
I edited my question to make you more clear. In may case i can't change my class or structure.above is the code.can i use each() or something like that to get both data – Navin Bista Apr 22 '15 at 09:08
OK, but you should change your question title - it is "selected" now, I would go for "Get text of options with the same index, but in two separate divs with the same class name" or sth like that. – n-dru Apr 22 '15 at 09:24

score 0 · Answer 3 · answered Apr 22 '15 at 08:41

0

If you want to get the text of selected option, you need to get the jquery object of selected option and then use .text() or .html() to get inner content in it:

$('.productOptionViewSelect option:selected').text();

answered Apr 22 '15 at 08:41

Milind Anantwar

81,290
25
94
125

score 0 · Answer 4 · answered Apr 22 '15 at 08:43

0

try

$('.productOptionViewSelect select').find('option:selected').text();

answered Apr 22 '15 at 08:43

Sudharsan S

15,336
3
31
49

score 0 · Answer 5 · answered Apr 22 '15 at 08:51

0

$("select.validation option:eq(1)").text();

answered Apr 22 '15 at 08:51

Aneesh R S

3,807
4
23
35

Get selected option's text in an HTML select using jQuery

5 Answers5