*

jQuery Mobileのselectフォームを非表示にする

公開日: : 最終更新日:2013/08/09 jQuery Mobile

jQuery Mobileではselectフォームを非表示にする際、
以下のようにselectタグそのものを対象に操作しても
正常に動きません。

     $('select').hide();

というのも、jQuery Mobileでselectフォームの見た目を担って
いるのはselectタグではなく、selectタグを取り込んだdivタグ
だからです。

なので、上記のようにselectタグのみhide()にすると、見た目は
そのままで、selectフォームが動かない。という状態になります。

このselectタグを囲むdivタグは、jQuery Mobileによって自動的に
割り当てられるので、以下のようにして非表示にします。

    $('select').parent().hide();

もしくは、以下のように自分でselect分を囲むdivタグを追加し、
その追加したdivタグに表示/非表示の操作をする、という方法も
あります。
(この場合ももちろんjQuery Mobileによるdivタグの追加は行われます。)

<script type="text/javascript">
$(function(){
    $('#wrapper').hide();
});
</script>
<div id="wrapper">
<select>
    <option>bobo</option>
    <option>bobo</option>
    <option>bobo</option>
    <option>bobo</option>
    <option>bobo</option>
</select>
</div>

関連記事

no image

jQuery MobileでAjaxを無効にする方法

jQuery Mobileを使ってサイトを構築すると、ページ遷移がうまくいかなかったり、 Goog

記事を読む

no image

jQuery Mobileで作成したページにGoogle Analyticsを導入したがうまく動作しない

jQuery Mobileで作成したページにGoogle Analyticsを導入してもうまく動作し

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

PAGE TOP ↑