简单的JavaScript来访问选择元素/下拉列表的选定值

Question

我知道如何在下拉列表中获取所选项目的值/文本:

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

和

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

这真是一个很大的代码.所以我创建了一个名为"$$"的函数,它很简单:

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

并按如下方式使用它来分别检索值和文本:

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

但我还希望将此代码最小化,如下所示:

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

我也知道jQuery,但我不想使用它,因为有时我不需要jQuery提供的那么多功能,并且使用较小的文件大小来加快页面资源的加载.

那么,我如何制作可以按我想要的"$$"对象？

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

如果你不反对一些原型摆弄,你可以使用这个:

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

这是一个演示:http://jsfiddle.net/Ynb8j/