村井(マックスではない)はじめに開発をしている際に、以下のような要件が出てきました。1セレクトボックスを3つ使う(以下ボックスA、ボックスB、ボックスC)。2ボックスA以外のセレクトボックスのリストは最初は空。3ボックスAを変更したらボックスBのリストを変更4ボックスBを変更したらボックスCのリストを変更5これらはフォーム内で用い、サブミット時バリデーションエラーに引っかかれば、入力項目そのままでフォーム画面に戻る。最初は「動的に変更するなら、それぞれにchangeイベント設定してAjaxで値取ってきてリストにしてぶち込めばいいな。」と思っていましたが、5があることでこの安易な考えは打ち砕かれました。5を実際に実行してみると、フォームの値は持って帰ってきてくれますが、適用するリスト項目がないので、もちろん何も選択してくれません。各セレクトボックスには最初からすべてのリストを持たせておく必要があるが、ユーザーから見て動的にリストが変更されるようにしなくてはならない。私が至った結論は、とりあえず初期のリストは全部持たせて後からJavaScriptで見えないようにすればいいのでは?といったものでした。今回はボックス2つ想定で話を進めていこうと思います。(3つにしたところで同じような処理が増えるだけなので)ボックスAのA-1を選んだら、ボックスBのdata-id=”1′′の項目のみがリストに表示されるといった法則で実装をしたい。data-id="3">B-6</option></select>まず「見えないようにする」で思いついたのがCSSの「display:none」です。そこでjqueryの「hide()」「show()」を使ってみようと思いました。+"']").show();});結論として、うまくいきました!...IEを除いては。WEBエンジニア最大の敵ですね。いうわけでこの方法は除外です。続けて調査を進めていると、「optionタグをspanタグなどでラップしてしまえば非表示になる」という記事を見つけました。data-id="1">B-1</option></span>早速上記のようにしてみたところ、IEでも非表示になることが確認できました。最終的に以下のように実装をしてみました。+"']").unwrap();});うまくいきました!ただし、セレクタを間違えるとoptionタグにspanタグが多重で付いてしまう可能性があるので、気を付けるようにしてください。まとめ今まで「動的に値を変える=Ajax」という頭でしたが、違う観点で考えるきっかけができてよかったと思います。セレクタの使い方やカスタムデータ属性などについても、実際に使う機会ができて有意義な内容でした。システム開発のご相談はこちらからお気軽にお問合せください。コメントをキャンセルメールアドレスが公開されることはありません。/技術コンサルティング、といった総合的な開発ソリューションを展開しています。