jquery mobileでプルダウンを選択状態にしたい時

javascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをフォームのプルダウンメニューに反映させたいことは多いはず。
javascriptを使いセレクトメニューを選択済にする方法はいろいろなサイトで公開されているのから困らないが、通常のjavascriptで選択状態にするだけでは、jquery mobileを使っている場合に反映されない。

jquery mobileを使用する環境でjavascriptを使って任意のプルダウンメニューを選択状態にしたい時は以下のサンプルを参考にすると良い。

HTML

<form method="get" action="" id="select">
    <select name="menu" id="course">
        <option value="">選択してください</option>
        <option value="1">セレクト1</option>
        <option value="2">セレクト2</option>
        <option value="3">セレクト3</option>
        <option value="4">セレクト4</option>
        <option value="5">セレクト5</option>
    </select>
</form>

javascript

<script type="text/javascript">
    //選択済にしたい項目のvalue
    var co = 2;

    //該当するselectのIDにセット
    $('#course').val(co);

    //jquery mobile用の処理
    $('select').selectmenu('refresh',true);
</script>

最後の

$('select').selectmenu('refresh',true);

がポイント

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク