SIZE は一度に表示される項目の数です。 1の場合ドロップダウンリストボックスになります。

コ ー ド	表　示
<SELECT SIZE=1> <OPTION>ビーチバレー <OPTION>遠泳 <OPTION>射的 </SELECT>	ビーチバレー 遠泳 射的
<SELECT SIZE=3> <OPTION>ビーチバレー <OPTION>遠泳 <OPTION>射的 </SELECT>	ビーチバレー 遠泳 射的

Selectオブジェクトの名前を表わします。 オブジェクトを指定するときに用います。

リストボックスで何番目の項目が選ばれているかを表わします。 一番上が 0 で 項目数 - 1 までの値を取ります。 書き込みも可能です（すなわちコードから項目を選ぶことが可能です）。

Selectオブジェクトは典型的に次のように用います。

    function test1(form) {
        //選択された項目番号
        var index = form.select1.selectedIndex;
        //表示されているテキスト
        var str = form.select1.options[index].text;
        form.text1.value = str;
    }
    
    function test2(form) {
        var index = form.select1.selectedIndex;
        //要素が持つ値
        var str = form.select1.options[index].value;
        form.text1.value = str;
    }
    
    <CENTER><FORM>
    <SELECT NAME="select1" SIZE=3>
    <OPTION VALUE="4月1日">さくら
    <OPTION VALUE="9月3日">ともよ
    <OPTION VALUE="2月29日">とうや
    </SELECT>
    <INPUT TYPE="button" VALUE="押してね☆"
                         ONCLICK="test1(this.form)">
    <INPUT TYPE="button" VALUE="押してね☆"
                         ONCLICK="test2(this.form)">
    <INPUT TYPE="text" NAME="text1" SIZE=20>
    </FORM></CENTER>
 

さくら ともよ とうや

左のボタンを押すと選択されている項目が、 右のボタンを押すと選択されている項目の値が 右のテキストボックスに表示されます。

そのoptions arrayの要素が選択されているかどうかを true または false で返します。書き込みも可能です。 特にMULTIPLEオプションをつけたときに有効です。

このオプションをつけると複数項目選択可能になります。

    <SELECT NAME="select1" MULTIPLE SIZE=3>
    <OPTION>さくら
    <OPTION>ともよ
    <OPTION>とうや
    </SELECT>
 

手動での複数項目選択の方法はプラットフォーム依存かもしれません。

このオプションをつけるとこの項目が初期に選択されています。

そのoptions arrayの要素が初期に選択されていたか （すなわちSELECTEDオプションがつけられていたか）を true または false で返します。

今までと違う項目が選択されたときに実行されます。

    function test3(obj) {
        with(obj) {
            form.text1.value = options[selectedIndex].value;
        }
    }
 

さくら ともよ とうや

項目の追加は、 Optionコンストラクタを用いて 項目を生成してから行ないます。 Optionコンストラクタは次のように使います。

    var op = new Option(text, value);
 

これをoptions arrayに追加します。
逆に削除するにはoptions arrayの要素に null を代入します。
ともに、最後に history. go(0); を実行します。

    function test4(form) {
        var len = form.select1.length;
        form.select1.options[len]
                    = new Option("ゆきと", "12月25日");
        if(navigator.appName.substring(0, 1) == "N") //NNのとき
            history.go(0);
    }
    
    function test5(form) {
        var len = form.select1.length;
        if(len > 1) {
            form.select1.options[len-1] = null;
            if(navigator.appName.substring(0, 1) == "N")
                history.go(0);
        }
    }
 

さくら ともよ とうや

上のコードにあるように Internet Explorer では history.go(0); を実行しません。実行すると、また最初の状態に戻ってしまいます。