Search code examples
javascriptyui

YUI 3: Getting the selected option's text

I am working with YUI 3, coming from jQuery, but I have a question about YUI usage.

I have a select tag with some option tags:

 <select id="ownerSelector">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
 </select>

I want to get the selected option's text.

Is there anything resembling jQuery's $('option:selected') extension in YUI 3?

I saw this over at http://www.jsrosettastone.com/#selectors that a way to do this is Y.all('option[selected]'), but that doesn't work. (Either that, or I don't know which YUI module the [] selector syntax belongs to.)

If there is no shortcut, I noticed that when I query Y.all('#ownerSelector option'), I can see the NodeList array, and one of the options has a property called 'selected'. Is there a way to get at the selected option?

Solution

  • I think this is what you're looking for:

    YUI().use("selector-css3", "node", function (Y) {
    var text = Y.one("#ownerSelector option:checked").get("text");
});

    http://jsfiddle.net/aqPus/2/