2

ドロップダウンで選択したアイテムの値/テキストを取得する方法を知っています：

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が提供する機能をそれほど必要とせず、ページリソースの読み込みを高速化するためにファイルサイズを小さくする必要があるため、使用したくありません。

では、どのようにして「$$」オブジェクトを自分の思い通りに動作させることができるのでしょうか。

4

2 に答える 2

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

于 2012-11-20T12:28:43.070 に答える
0

アサドありがとう。あなたのスクリプトから、私はより多くの機能をカバーするように拡張しました。これは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 />

後でプロトタイプの方法を試します。古いブラウザとの互換性が気になります。

于 2012-11-20T17:33:12.607 に答える