21

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

1
  • 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, 2010 at 4:14

4 Answers 4

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()
5
  • Using attr("id") is no different in efficiency to specifying the id directly into the code.
    – Mouhannad
    Sep 18, 2010 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, 2010 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, 2010 at 16:42
  • The second one is find, and in fact should be the correct answer.
    – Yi Jiang
    Sep 18, 2010 at 16:54
  • this does not get the name of the option,but it;s value only.
    – Madrugada
    Apr 9, 2013 at 14:16
6

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

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>

1
  • 1
    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, 2015 at 22:54
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.