Safariでoptionタグを非表示に……できない!?

249 view

iphone
こんにちは、ゆーたです。

最近担当した案件の中で『2つのセレクトボックスを連動させてほしい』という依頼がありました。
例えば、あるセレクトボックスで都道府県を指定したら、その都道府県に属する市区町村がもう一方のセレクトボックスに表示されるみたいなやつですね。

jQuery使えばお茶の子さいさいじゃん???と高をくくっていたのですが、いざ取り掛かってみたら思わぬ落とし穴が待っていました…

どんな方法で実装したか、メモがてらご紹介します!

optionタグをhide()で非表示にしてみる

最初に考えたのは表示させたいoptionタグだけを残し、ほかを非表示にする方法。

今回は下記2つのセレクトボックスを使用します。
① 都道府県セレクトボックス
② 市区町村セレクトボックス

まず②のoptionタグにdata-prefectureという独自の属性を用意します。その値にはそれぞれの市区町村が属する都道府県名を入れておきます。
①で選択された都道府県名と、②の各optionタグに設定したdata-prefecture属性の値(都道府県名)を比較し、一致すればそのまま、一致しなければoptionタグをhide()関数で非表示にします。

詳細は下記のコードを参考にしてください。

See the Pen select_test01 by Yuta (@katty6624) on CodePen.0

瞬殺ですね。

これで厄介な連動部分は片付いたぞーっと、思った矢先。

「……あれ?Safariだと効かなくない??」

ohhh…(´ω`)

そういうブラウザの仕様なのか?
調べてみると同じ問題に直面している方々がいらっしゃいました。

「iPad(+Safari)で、select の option に対して、hide,show が効かない現象に対する対策」
https://web-atelier-midori.com/blog/javascript/1359/

「IEはjQueryの.hide()でoption要素を非表示にできない」
http://www.tinybeans.net/blog/2016/03/07-151657.html

ChromeやFirefoxでは問題ないのですが、SafariIEだとoptionタグにshow()やhide()が効かない、つまりdisplayプロパティを適用できないみたいです。

このまま放っとくわけにもいかないので、おとなしくやり方を変えることにします。

セレクトボックスの中身を丸ごと入れ替える

optionタグにdisplayの指定ができないのなら、セレクトボックスの中身をごっそり入れ替えてしまおうと考えました。時には思い切りも必要です。

まず、jQuery側で都道府県の配列と市区町村の2次元配列をあらかじめ定義しておきます。
ここで注意すべきは都道府県と市区町村の配列の順番を対応させておく、ということ。

①で選択された都道府県のインデックス番号(配列内の何番目の要素か)を取得し、同じ順番にある市区町村の配列の値optionタグに置き換えてから②に出力します。

See the Pen select_test02 by Yuta (@katty6624) on CodePen.0

こちらはSafari、IEでもちゃんと動いてくれました。
ヨカッタ…(´ω`)

まとめ

SafariやIEではoptionタグにdisplayプロパティを適用できないんですね。
改善策として今回は「セレクトボックス内を丸ごと入れ替える」方法をご紹介しました。

みなさんもoptionタグを触るときはCSSのdisplayに気をつけて!

WRITER

ゆーた

制作 ゆーた

新潟生まれ新潟育ちの24歳。

現在は制作部として奮闘中。たまにカメラも構える。
体力なさそうなのはデフォルトです。

TAGS