javascript - 简单的 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;
        }
    };
}

如果你不反对一些原型(prototype)摆弄，你可以使用这个:

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/