Ajaxでselectボックスの中身を変えた時、表示上 前の値が残る
今回、
年のselectを変更したらAjaxでphpを見に行って、
月のリストを記事が登録されている月に変更するという処理を作った。
が、選択された月の値が(内部的には変わっているのかもしれないが)
見た目上変わっていない。
↑の12は、2010年には存在するが2011に変更したときは値が存在しないので、値が変わるはずなのに変わらない。
解決策はこれ
<script type="text/javascript"> // <![CDATA[ $(function(){ $("#year").change(function () { $val = $(this).val(); $.ajax({ type: "GET", url: "ajax.php", data: "year="+$val, success: function(msg){ if(msg) { $("#month" ).html(msg).selectmenu('refresh', true); $("#month").val("-"); } } }); }); }); // ]]> </script>
肝心なのは
.selectmenu('refresh', true);
の部分でselectmenuをリフレッシュしているところ
via
- How to add items and refresh the select menu in JQuery mobile - jQuery Forum
- jQuery mobileでブラウザネイティブのselectダイアログを使う | Aerialarts