要素の追加 (add)

ドロップダウンの文字列に text 属性を直接指定する

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function addTest1() {
	if (!document.createElement) return;

	var opt = document.createElement("option");
	opt.value = "ddd";
	opt.text = "DDD";

	if (navigator.userAgent.match(/Gecko/)) {
		document.form1.select1.appendChild(opt);
	}
	else {
		document.form1.select1.add(opt);
	}
}
// -->
</script>
</head>
<body>
<form action="#" name="form1">
<select name="select1" size="5" onchange="alert(this.value);">
<option value="aaa">AAA
<option value="bbb">BBB
<option value="ccc">CCC
</select>
<input type="button" value="追加" onclick="addTest1();">
</form>
</body>
</html>

このようにブラウザによって動作が違いますので、互換性を重視される場合は appendChild() を使用された方が良いと思いますが、Mac IE では appendChild() による option の追加がうまくいかないので、用途に応じてそれぞれ使用された方が良いと思います。

なお、ブラウザの振り分けは if (navigator.userAgent.match(/Gecko/)) を if (!document.all && document.getElementById) としても良いと思います。

text 属性を直接指定時に option を任意の場所に追加する

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function addTest2(obj) {
	if (!document.createElement) return;

	var insert = 2;					// <option> を追加する位置（一番上は0）
	var opt = document.createElement("option");
	opt.value = "ccc";
	opt.text = "CCC";

	if (navigator.userAgent.match(/Gecko/)) {
		obj.insertBefore(opt, obj.options[insert]);
	}
	else {
		obj.add(opt, insert);
	}
}
// -->
</script>
</head>
<body>
<form action="#">
<select name="select1" size="5" onchange="alert(this.value);">
<option value="aaa">AAA
<option value="bbb">BBB
<option value="ddd">DDD
</select>
<input type="button" value="追加" onclick="addTest2(this.form.select1);">
</form>
</body>
</html>

Netscape では add() の第2引数での位置指定ができないので insertBefore() を使用して任意の位置に追加します。引数 obj は呼び出したフォームのセレクト部を指します。

余談ですが、Netscape で obj.options[insert].appendChild(opt); とした場合も追加はされますが、追加する option の親要素を選択すると追加された子要素も選択状態になってしまいますので、実際には使用されない方が良いと思います。

Internet Explorer の場合は add() の第2引数での場所指定が可能なのでそのまま指定することができます。