Option句の追加と削除

選択肢(option句)を追加する場合は
(1)selectのlengthプロパティの値を１増やす。
(2)valueプロパティとtextプロパティを設定する。

var sel = document.myForm.mySelect; sel.length++; sel.options[sel.length - 1].value = 3; sel.options[sel.length - 1].text = ""横浜;

選択肢(option句)を削除する場合は「セレクト.options[選択肢の番号] = null」とする。

var sel = document.myForm.mySelect; // 先頭の選択肢を削除 sel.options[0] = null;

DOMによるSelectボックス作成

DOMを利用して、配列のデータを元に選択ボックスを作成します。
選択ボックスには、選択時に何番目の項目が選択されたかを求めるonchangeイベントハンドラを定義します。

// 選択項目データ用配列 var item = new Array( "青木", "井上", "上田", "遠藤", "大木" ); var select; // ページのロード時に呼び出される関数initをセット window.onload = init; // ページのロード時に呼び出される関数 function init(){ // select要素作成 select = document.createElement("select"); for( i=0; i<item.length; i++ ){ // option要素作成 var option = document.createElement("option"); // option要素のvalue属性に選択項目データ option.value = item[i]; // テキストノード作成 var text = document.createTextNode(item[i]); // テキストノードをoption要素に追加 option.appendChild(text); // option要素をselect要素に追加 select.appendChild(option); } // select要素をform要素に追加 document.getElementsByTagName("form")[0].appendChild(select); // select要素にonchangeイベントハンドラを定義 select.onchange = check; } // onchangeイベントハンドラ(選択ボックスが選択された時）の処理 function check(){ // 選択されている項目の番号 var n = select.selectedIndex + 1; // 選択されている項目のvalue属性の値 var str = select.value; alert(n+"番目の"+str+"が選択されました"); } <form action="#"> </form>

連動するSelectボックス

他のフォームコントロールの設定にあわせて、select要素の選択肢を変更します。

（１）通常のJavaScriptを使用

(手順)
(1)select要素からすべてのoption要素を削除する。
  document.myForm.mySelect.options.length = 0;

(2)新しいoptionオブジェクトでotpion要素を埋めていく。
   optionオブジェクトのコンストラクタ関数の構文は

   var newOpt = new Option("text", "value", defaultFlag, selectedFlag);
     text：ラベル文字列
      value：送信される文字列
      defaultFlag：デフォルトで選択される選択肢かどうか
      selectedFlag：現在選択されているかどうか

（２）DOMを使用

同様の処理を、W3C DOMを利用する事もできます。

(注意)
W3C DOMとIEでは、add()メソッドの2番目の引数に差異があり。
add()メソッドの2番目の引数は、追加されるoption要素の位置を指定。
・W3C DOM
(1) 既存のoption要素への参照
(2)null　：　リストの最後に追加

・IE (省略可)
(1)整数値　：　選択肢配列のインデックス
(2)省略または -1　：　リストの最後に追加