LoginSignup
1

More than 3 years have passed since last update.

iOS Safariでselect optionにdisplay:noneが効かない対策

Last updated at Posted at 2020-02-05

表題のとおり、iOSの場合はselect optionにdisplay:noneは効かない。
ググってるとwrapするといいとのことで、たしかにwrapすると何故か消える。
(wrapするタグにはstyleを一切設定していないのに・・!?)
ただ、個々にちまちまwrapさせるのもめんどくさいので
optionにdisplay:noneをしたら勝手にoptionタグをwrapしてくれれば
今まで通りだしいいやんって思った次第。

attrchange.js
https://github.com/meetselva/attrchange/
このjQueryプラグインを利用すると
styleに変化があるとEventが上がってくるので利用させてもらったのが以下のコード。

もう少しやり方あるだろ?って思われそうだけど、ひとまずそこは・・

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="./Scripts/attrchange.js"></script>

<script>
$(document).ready(function(){

    //iOSのときselect optionをdisplay=noneにしても消えないので、
    //attrchange.jsを利用してcssがdisplay=noneとかにいじられたらoptionタグをwrapする
    $("option").attrchange({
        trackValues: true,
        callback: function(evnt) {
            //console.log(evnt);
            if(evnt.type == "attributes" && evnt.attributeName=="style"){
                if($(this).css("display")=="none"){
                    if($(this).parent().attr("mode")!="wrap"){
                        $(this).wrap("<p mode='wrap'>");
                    }
                }else{  // 空白やdisplay iosだとinlineになるっぽい
if($(this).parent().attr("mode")=="wrap"){
                        $(this).unwrap();
                    }
                }
            }
        }
    });
});
</script>

しかし、なんでoptionをpタグでwrapすると消えるんだろう??

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1