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         


        

Answer 1

This should work:

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

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

or this will work:

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

Answer 2

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>

Answer 3

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

Answer 4

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);
});