#1274 new
Michael Morris

currentLabel method for select elements.

Reported by Michael Morris | August 18th, 2011 @ 03:37 PM

As we all know $('mySelect').value returns the value of the current option. Occasionally it's useful to know what the displayed text of that option is. Accomplishing this isn't too hard but its also not intuitive for newer users. Proposed is a shortcut method. Again, I really need to learn GIT so I can commit some of these patch proposals directly, but I haven't had the time yet.

Element.addMethods( 'select', {
    currentLabel: function(e) {
        return e.down( e.selectedIndex ).innerHTML
    }
});

So this allows the current label of select elements to be reached by this intuitive call

$('mySelect').currentLabel();

I'm not married to the name of the method. If anyone has a better name please suggest it.

Comments and changes to this ticket

  • Victor

    Victor August 25th, 2011 @ 10:58 AM

    Do you have tested it with different formatting (OPTGROUP, HTML comments between options, whitespaces, tags like B or STRONG inside of OPTION)? Which result for

    <option>This <b>is</b> a <i>test</i></option>
    

    is expected?

  • Michael Morris

    Michael Morris August 25th, 2011 @ 12:55 PM

    I haven't tested it extensively, but .selectedIndex will give the option tag regardless of how it was wrapped by optgroups - its a standard browser function. The function returns the contents of the tag, including any markup - though many browsers will not honor markup tags around option contents.

  • Victor

    Victor September 1st, 2011 @ 08:45 AM

    Look, in this sample

    <select id="select">
      <optgroup>
        <option>0</option>
        <option selected="selected">1</option>
      </optgroup>
      <optgroup>
        <option>2</option>
        <option>3</option>
      </optgroup>
    </select>
    

    selectedIndex will be 1 but $("select").down(1) will return the whole second OPTGROUP instead of OPTION.

  • Michael Morris

    Michael Morris September 1st, 2011 @ 09:08 PM

    Hmm. I didn't test for that since I don't use optgroups often. However, the down method can specify tags.

    NOT TESTED

    
    Element.addMethods( 'select', {
        currentLabel: function(e) {
            return e.down( 'option', e.selectedIndex ).innerHTML
        }
    });
    

    That should address your test case. Any others folks? Opinions on whether this should be included?

  • Victor

    Victor September 8th, 2011 @ 08:44 AM

    Why you don't use options property of select tag?

    Element.addMethods('select', {
        currentLabel: function(e) {
            return e.options[e.selectedIndex].innerHTML
        }
    });
    

    also innerHTML returns not text of option, but HTML content (e.g. for <option><span>some</span> text</option> it will return <span>some</span> text while user sees some text)

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Pages