社内SEの徒然なる日記

IE11によるSELECT要素のname属性の扱い

■ 状況

javaScriptでSELECT要素の値に応じて、ある項目の表示/非表示を切り替える処理があったのですが、IEのバージョンが10以上(実際の発生は11)の時に、これまで正常に動作していた処理が異常するようになりました

HTMLはこんな感じにします。
<%-- 形態 --%>
<SELECT name="form" tabindex="-1" onClick="JavaScript:formChange();">
<OPTION value="01">01</OPTION>
<OPTION value="03">03</OPTION>
</SELECT>
<LABEL id="wearhouseLabel" style="">01の時のみ表示する</LABEL>


そして、javaScriptはこうです。
<%-- ヘッダ部の書式設定処理 --%>
function formChange() {
try {
<%-- 形態 = "01" の場合 --%>
if (document.getElementById("form").value == '01') {
document.getElementById("wearhouseLabel").style.display = "none";
<%-- 形態 = "03" の場合 --%>
} else {
document.getElementById("wearhouseLabel").style.display = "";
}
<%-- エラー発生時の処理 --%>
} catch(e) {
window.alert("【エラー検出】¥n¥n 発生処理 = formChange¥n¥n error = " + e.description + "¥n¥n error # =" + e.number);
return;
}
}


SELECTの値が変更されたら、formChangeを実行。formChangeでは、SELECTの値によってLABEL(wearhouseLabel)の表示/非表示を切り替えています。エラー内容が捉えられるように、エラートラップも仕掛けておきます。

これで画面を表示すると、「未定義またはNULL参照のプロパティ'value'は取得できません」(-2146823281)というエラーが発生します。
HTML5とSELECT

IE8までは問題ないようなのだが・・・

■ 対応

SELECT要素のname属性と同じ名称でid属性を追加しました。

<%-- 形態 --%>
<SELECT id="form" name="form" tabindex="-1" onClick="JavaScript:formChange();">
<OPTION value="01">01</OPTION>
<OPTION value="03">03</OPTION>
</SELECT>
<LABEL id="wearhouseLabel" style="">01の時のみ表示する</LABEL>


■ 後書き

HTML5の関係で発生するようになったエラーだとは思うのですが、SELECT要素のname属性って廃止されてないと思ってたんですけどね。まぁ、理屈はともかく動かないを話にならないので直したのですが。

勤め先では、元々はホストコンピュータを使用していて、クライアント側にはエミュレーターをインストールするタイプ(要はC/S)のシステムだったのですが、10年ほど前にWEBシステムに切り替えました。

その時の謳い文句は「クライアント側で特別な設定が不要」だったと思うのですが、却って大変な手間がかかるようになった気がします。

結局、基幹システムのように長期間使用する前提のシステムは、クライアント側に専用のソフトをインストールするタイプの方が良い気がします。

投稿記事の一覧:http://harikofu.web.fc2.com/

--- blog end — スポンサードリンク

PageTop

コメント


管理者にだけ表示を許可する