用于访问选择元素/下拉列表的选定值的简单 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/

Answer 2

谢谢阿萨德。 从您的脚本中，我扩展以涵盖更多功能。这里是jsfiddle.net 及以下：

<script>
function $$(id, optValue) { 
    var el = document.getElementById(id);
    return {
        element: el,
        get text() {
            return el.options[el.selectedIndex].text;
        },
        get value() {
            if(el.type == 'select-one' || el.type == 'select-multiple')
                return el.options[el.selectedIndex].value;
            else
                return el.value;
        },
        get html() {
            return el.innerHTML
        },
        set html(newValue) {
            el.innerHTML = newValue;
        },
        set text(newText) {
            if(optValue == undefined)
                optValue = el.options[el.selectedIndex].value;
            for(i=0; i<el.length; i++)
                if(el.options[i].value == optValue)
                    el.options[i].text = newText;
        },
        set value(newValue) {
            if(el.type == 'select-one' || el.type == 'select-multiple')
            {   if(optValue == undefined)
                    el.options[el.selectedIndex].value = newValue;
                else
                    for(i=0; i<el.length; i++)
                        if(el.options[i].value == optValue)
                            el.options[i].value = newValue;
            }
            else
                el.value = newValue;
        }
    };
}

function f1() { $$('sel1').text = $$('txt1').value }
function f2() { $$('txt2').value = $$('sel1').text }
function f3() { $$('sel2',($$('txt3').value == '' ? undefined : $$('txt3').value)).value = $$('txt4').value }
function f4() { $$('span1').html = $$('txt5').value }
function f5() { $$('txt6').value = $$('span1').html }
</script>

text: <input id='txt1' /> <input type='button' value='set text' onclick='f1()' /> 
<select id="sel1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
<input type='button' value='get text' onclick='f2()' /> <input id='txt2' />
<hr />

current value: <input id='txt3' />, new value: <input id='txt4' /> <input type='button' value='set value' onclick='f3()' /> 
<select id="sel2">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
<hr />

text: <input id='txt5' /> <input type='button' value='set html' onclick='f4()' /> <span id='span1'>span</span>
<input type='button' value='get html' onclick='f5()' /> <input id='txt6' />
<hr />

我稍后会尝试原型方法。我只是担心它与旧浏览器的兼容性。