プルダウンを連動させるスクリプトを設置した時のIEでの挙動と回避策

サーバ移設完了＆リニューアルのお... | Home | Apolloがアポロじゃなかった...

2007
06/10
プルダウンを連動させるスクリプトを設置した時のIEでの挙動と回避策: CATEGORY:Javascript/Ajax/DOM,Webネタblog,ブラウザ　TAG:IE,Javascript; MT復帰の際に過去の一部の記事で正常に表示できないものがあるようです。
閲覧数の多い記事から少しずつ直していこうと思いますがすべての記事の復旧は難しいと思います。
わざわざお越しの方には申し訳ありませんがご容赦ください。

かなり前の話だけども、なんだったかの改修案件でお願いされた際に
手前味噌にサンプルを用意したのが残ってたのであげておきます。
（作った時期が古くて、まったくDOMれてないけどね・・・。）

比較的よく目にすることが多い
一方のプルダウンを選択すると、もう一方のプルダウンの
選択肢が切り替わるスクリプト。

使われる場所はといえば、
入力フォームなどにからめて設置されることが多いかもしれません。

入力フォームということは、概ねそのあとには確認画面があるわけですが、
確認画面で入力内容が間違っていた際に、前の画面に戻って修正させるような仕様だった場合、
IEに限ってはなんだかプルダウンの動きが妙なのです。

例：
よくある連動スクリプトの動きのサンプル
（※IEでご覧ください。）

ほらね。
2つめのプルダウンの中身がおかしいっしょ。

具体例をあげると、たとえば
カテゴリのプルダウンで、【輸入盤タイトル】を選択して
ジャンルのプルダウンを【ROCK】と選択して、次のページへ進み、
ブラウザのバックボタンで戻ってみよう。

こちらの期待通りの動作は、もちろん【輸入盤タイトル】で【ROCK】
なはずですが、【輸入盤タイトル】で【J-POPS】となります。

※もちろん他のブラウザ（FirefoxとかOperaとか）ではなんともないんですけどね。

で、説明の前に改修バージョンがこちら

よくある連動スクリプトの動きのサンプル改修済みバージョン
（※IEでご覧ください。）

ほらね。
無問題。

結論から言うとどうやら、IEだけはプルダウンのselectedナンバーしか
キャッシングしてくれてないようなんですね。

なので、単純にページをonload時に1つ目のプルダウンを
選択した時のスクリプトと同じ関数PDsetを実行してやってるかんじでなのですが、それだけだと、カテゴリのプルダウンを選択しなおした際の挙動がおかしくなるのでフラグを立てて、onload時に実行される際のPDsetには2つ目のプルダウンのselectedを入れなおす処理をかけて解決させています。

あーそうそう。繰り返しになるけども
サンプルのスクリプトは改修当時のソースですので、
突っ込みどころ満載かもしれません。

もし参考にされる際は、
適宜修正してご利用ください。
（だれかやる気のない私のかわりにDOMスクリプティングで書き直してください。w）