Question

I know how to get value/text of the selected item in a drop down:

document.getElementById('selNames').options[document.getElementById('selNames').selectedIndex].value

AND

document.getElementById('selNames').options[document.getElementById('selNames').selectedIndex].text

This is really big code. So I have created a function named “$$” which eases this quite:

function $$(id) { return document.getElementById(id) }

And using it as following to retrieve value and text respectively:

$$('selNames').options[$$('selNames').selectedIndex].value
$$('selNames').options[$$('selNames').selectedIndex].text

But I further want to minimize this code as following:

$$('selNames').val
$$('selNames').text

I know jQuery too but I don’t want to use it because sometimes I don’t require that much functionality that jQuery is providing and to use lesser file size for faster loading of page resources.

So, how do I make the “$$” object that can act as I want?

Answer 1

function $$(id) { 
    var el = document.getElementById(id);
    return {
        element: el,
        get val() {
            return el.options[el.selectedIndex].value;
        },
        get text() {
        return el.options[el.selectedIndex].text;
        }
    };
}

If you’re not averse to some prototype fiddling, you can use this:

HTMLSelectElement.prototype.__defineGetter__("val", function() { return this.options[this.selectedIndex].value; });
HTMLSelectElement.prototype.__defineGetter__("text", function() { return this.options[this.selectedIndex].text; });

Here is a demonstration: http://jsfiddle.net/Ynb8j/