お世話になります。
下記のソースのようにselect1の値が変更されたら
それに連なる値をselect2に表示させるようにしたのですが
select2のタグに「multiple="multiple" data-native-menu="false"」の記述があると(更新)動作しません。
上記の記述がなければ複数選択はできませんが、表示だけはされます
「multiple="multiple" data-native-menu="false"」の場合は
このやり方ではいけないのでしょうか
------------以下ソース
$("#select1").change( function(){
setSelect2($(this).val());
});
function setSelect2(s){
$('#select2').find('option').remove();
$(test_json).each(function(i){
if(test_json[i].id == 1){
$('#select1').append($('<option></option>')
.val(i)
.text(test_json[i].name));
}
});
}
//初期値設定
setSelect2(0);
});
</script>
</head>
セレクト１
<select id="select1" data-theme="b">
<option value="0">ZERO</option>
<option value="1">TWO</option>
<option value="2">THREE</option>
</select>
セレクト２
<select id="select2" multiple="multiple" data-native-menu="false" data-theme="b">
</select>
No.1
20
6
こちらの環境では動作しました。
IE11, Chrome35, Firefox30で確認しました。
ちょっと想像入ってますが、提示されたソースから特に何も変わってないと思います。
一応ソース貼ります。
※修正しました。コメントで補足します。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jm/jquery.mobile-1.4.2.min.css" /> <script src="jquery-1.11.1.min.js"></script> <script src="jm/jquery.mobile-1.4.2.min.js"></script> <script> $(function() { var test_json = [ {"id" : 1, "name" : "ghi"}, {"id" : 0, "name" : "abc"}, {"id" : 2, "name" : "mno"}, {"id" : 2, "name" : "pqr"}, {"id" : 0, "name" : "def"}, {"id" : 1, "name" : "jkl"} ]; $("#select1").change( function(){ setSelect2($(this).val()); }); function setSelect2(s){ $('#select2').children().remove(); $(test_json).each( function(i){ if(test_json[i].id == s){ $('#select2').append($('<option/>') .val(i) .text(test_json[i].name)); } }); $('#select2').selectmenu("refresh"); } //初期値設定 setSelect2(0); }); </script> </head> <body> <select id="select1" data-theme="b"> <option value="0">ZERO</option> <option value="1">TWO</option> <option value="2">THREE</option> </select> <br /> <select id="select2" data-theme="b" multiple="multiple" data-native-menu="false"></select> </body> </html>
suenaga3
2014/06/27 20:20:04
7
0
teioh12
1
4
2
jquery mobileでしたか。知らない領域でした。
2014/07/01 23:46:01ソースを修正したのでご確認ください。
主な変更点はsetSelect2関数の最初の行(変更)と最後の行(追加)の2行です。
まず最初の行ですが、jquery mobileによってselectタグの中にもいろいろタグが生成されるみたいなので、子要素は全部消した方がキレイになるかなと思いました。
たぶんこれは変えても変えなくても見栄えは変わりません。
で、最後の行ですが、調べてみたところ、この問題はよくある話みたいです。
この手の問題の解決法は、大雑把に「triggerでcreate」か「refresh」かのどちらかで解決するみたいですね。
今回はフォームの変更扱いなのでrefreshで対応しました。
以下のページにズバリありました。
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/basics/
ご回答ありがとうございます
2014/07/03 07:59:22無事select2の中身を更新する事ができました。
MSAccessでも同様の事する時はrequeryだのするのが常識だったのに
そこまで考えが及びませんでした。
必要な情報もご提供できない中長い間お付き合い頂きありがとうございました！