FireFoxだけエラーが出てしまう

質問

フォームのセレクトに追加するために以下のコードを作りました。

===外部ファイル[script.js]===

function addList(txt, val)
{
　document.getElementById("sel").length = document.getElementById("sel").length + 1;
　document.getElementById("sel").options[document.getElementById("sel").length - 1].text = txt;
　document.getElementById("sel").options[document.getElementById("sel").length - 1].value = val;
}

===HTMLファイル==============

<FORM action="test.cgi" method="GET">
　<SELECT name="sel">
　　<OPTION value="tokyo" selected>東京駅
　</SELECT>
　<INPUT type=submit>
</FORM>

<SCRIPT TYPE="text/javascript" SRC="script.js"></SCRIPT>

<SCRIPT type="text/javascript"><!--

　addList("新宿駅", "shinjuku");
　addList("渋谷駅", "shibuya");
　addList("池袋駅", "ikebukuro");

// --></SCRIPT>

しかし、IE6とOpera9.2では動くのですが、FireFox2.0ではエラーが出てしまいます。エラーは以下のようでプロパティがないと返されます。

　　　　document.getElementById("sel") has no properties

これはどのように直せばよいのでしょうか？
お手数ですがご教授お願いいたします（環境はWindowsXPです）。

回答No.1

steel_gray · ベストアンサー

<SELECT name="sel">
↓getElementBy「Id」だから
<SELECT id="sel">

お礼

ありがとうございます！
単純なミスなのですね。うまく動作しました！

回答No.3

yambejp

#2さんの心情はわかりますが、現在の趨勢ではformにnameをつけることは
残念ながら非推奨です。
formにidをふって、その子要素としてアクセスするのが妥当かと。

お礼

ありがとうございます。
FireFoxはいろいろ制限が厳しいのですね。

回答No.2

taketan_mydns_jp

直接的な回答は#1さんの方法で良いと思います。送信する場合はid以外に同じで結構なのでname属性をつけておけば汎用性があります。
<SELECT id="sel" name="sel">

でもこれだと何だかスマートじゃないですね（笑。
フォームをごにょごにょやる場合はDOMのgetElement等を使うより、formに名前をつけてアクセスするのが常道です。
例えば、
> <FORM action="test.cgi" method="GET">
=> <FORM action="test.cgi" method="GET" name="form1">

とやっておけば、
document.form1.フォーム内のエレメント名
でアクセス出来ます。今回の場合
document.form1.sel
でアクセス出来ます。

下記リンクのようなスクリプトを探しているのではないのでしょうか？
セレクトメニューを追加するには new Option()を使うととても簡単です。
http://www.openspc2.org/reibun/javascript/form_selectmenu/032/

お礼

ありがとうございます。
new Option()を使うやり方のほうが一般的のようですね。
修正させていただきます。