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

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

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

及

这是一个非常大的代码。因此，我创建了一个名为“$$”的函数，它非常简化了这一过程：

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

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

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

但我想进一步减少此代码，如下所示：

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

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

那么，如何使“$$”对象按我所希望的方式运行呢

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

这里有一个演示：

谢谢你，尽快。 从您的脚本中，我扩展到了更多功能。下面是它：

<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 />

函数$$（id，optValue）{
var el=document.getElementById（id）；
返回{
元素：el，
获取文本（）{
返回el.options[el.selectedIndex].text；
},
获取值（）{
如果（el.type=='选择一个'| | el.type=='选择多个'）
返回el.options[el.selectedIndex].value；
其他的
返回el.value；
},
获取html（）{
返回el.innerHTML
},
设置html（新值）{
el.innerHTML=newValue；
},
设置文本（新文本）{
if（optValue==未定义）
optValue=el.options[el.selectedIndex].value；
对于（i=0；iTry HTMLDOM），您的工作将变得非常多easier@Quasarthespacething，请你再解释一下，我不明白你的意思。谢谢。这样更好（对于
$$
函数）。我建议不要使用
\uuu defineGetter\uuuu
方法：原型摆弄有点脏，它是非标准的，而且也是。@Martijn不推荐使用的不是原型摆弄，而是摆弄原型的特殊语法。完全可以在原型中添加getter而不使用
defineGetter
@Asad：你说得对，我没有清楚地表达自己。我建议不要使用
\udefinegetter\uuuu
方法：这是一种非标准且不受欢迎的方法；我建议不要在任何情况下篡改原型，因为这有点肮脏。也就是说，它有时会派上用场。使用
的原型制作efineGetter__
在IE9中不起作用。@BNikunj是的，这是因为它是非标准的。请使用建议的第一种方法。请从您的答案中删除新问题，并更新您所犯的错误。否则，您可能会认为它将被删除……由于我更喜欢卷曲支撑样式的不同方法，我尝试更改样式，但它被抛出Firebug第6行（在
get text（）
）出现异常“
SyntaxError:missing；before语句
”。您可以找到源代码。问题在于return语句。大括号必须位于return语句的末尾。更正的代码为。
<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 />