Find name of selected option using jQuery

Question

I've made a jquery/ajax function that updates #courses, sending #fos's .val() and .text(), specifically of the one that is selected, like so:

$('#selling #fos').change(function() {
    $.post('/ajax/courses',
        {
            fos_id: $('#selling #fos').val(),
            name: $('#selling #fos :selected').text()
        },
    function(data) {
        $('#selling #courses').html(data);
    });
});

How do I extend this function so that it uses 'this', allowing me to reuse this function multiple times on the same page? I'm caught because you can't use name: $(this + ' :selected').text().

Thanks Stefanvds! I found it out after some hard researching... shoulda came back sooner. Looks like I used your second example! $(this).find(":selected").text() — bafromca, Sep 19 '10 at 04:14

Stefanvds · Accepted Answer · 2012-06-06T01:09:54.810

40

This should work:

$("#"+$(this).attr("id")+" :selected")

it's not pretty but it does the trick :)

or this will work:

$(this).find(":selected").text()

edited Jun 06 '12 at 01:09

answered Sep 18 '10 at 16:18

Stefanvds

5,795
4
45
69

Using attr("id") is no different in efficiency to specifying the id directly into the code. – Mouhannad Sep 18 '10 at 16:37
1

The example with `find` is fine. Much better than messing around with IDs (will fail if `this` doesn't have an ID, or has an ID with `.` or `:` characters in) – bobince Sep 18 '10 at 16:37
Ahh I didn't see that Brett had a space before ":selected" which means he is looking for a child.. then yes find() will work fine. I changed my vote!! – Mouhannad Sep 18 '10 at 16:42
The second one is find, and in fact should be the correct answer. – Yi Jiang Sep 18 '10 at 16:54
this does not get the name of the option,but it;s value only. – Madrugada Apr 09 '13 at 14:16

Mouhannad · Answer 2 · 2010-09-18T16:49:12.053

I think what you are looking for is .filter()

name: $(this).filter(':selected').text()

It will return empty string if it's not selected

Good luck!

Edit:

I didn't see that Brett had a space before ":selected" which means he is looking for a child. Stefanvds suggestion to use find() will work fine. filter() checks if the current dom is ":selected" while find() is going to look for the children on all levels. You could also use .children() if you know that the selected dom you are looking for is a direct child of "this" as it is a lot more efficient since you are only looking for one level of children.

name: $(this).children(':selected').text()

score 1 · Answer 3 · answered Jan 23 '15 at 03:54

Without jQuery

It's pretty simple to do this without jQuery. Inside of a change event listener, the selected option can be accessed using this.options[this.selectedIndex]. From there, you can access the value/text properties of the selected option element.

Example Here

var select = document.querySelector('#select');

select.addEventListener('change', function (e) {
    var selectedOption = this.options[this.selectedIndex];

    console.log(selectedOption.value);
});

var select = document.querySelector('#select');

select.addEventListener('change', function (e) {
    var selectedOption = this.options[this.selectedIndex];
    
    alert(selectedOption.value);
});

<select id="select">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

I've moved away from using jQuery since I wrote this question, so I appreciate you writing the vanilla-JS answer for others. — bafromca, Jan 23 '15 at 22:54

score 0 · Answer 4 · answered Feb 28 '16 at 01:31

You can also use jQuery's second argument (context) to avoid the unnecessary "filter", "find", "children" etc. This allows your selector to be something like:

$('select[name="myselect"]').on('change',function(){
    var selectedOptionName = $('option:selected',this).text();
    console.log(selectedOptionName);
});

Find name of selected option using jQuery

4 Answers4

Without jQuery

Linked