jqueryでselect-option操作


お世話になります。
下記のソースのように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>
セレクト1
<select id="select1" data-theme="b">
<option value="0">ZERO</option>
<option value="1">TWO</option>
<option value="2">THREE</option>
</select>

セレクト2
<select id="select2" multiple="multiple" data-native-menu="false" data-theme="b">
</select>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/06/26 14:18:15
  • 終了:2014/07/03 07:59:40

ベストアンサー

id:suenaga3 No.1

suenaga3回答回数19ベストアンサー獲得回数52014/06/30 21:44:51

こちらの環境では動作しました。
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>
他1件のコメントを見る
id:suenaga3

jquery mobileでしたか。知らない領域でした。
ソースを修正したのでご確認ください。
主な変更点はsetSelect2関数の最初の行(変更)と最後の行(追加)の2行です。

まず最初の行ですが、jquery mobileによってselectタグの中にもいろいろタグが生成されるみたいなので、子要素は全部消した方がキレイになるかなと思いました。
たぶんこれは変えても変えなくても見栄えは変わりません。

で、最後の行ですが、調べてみたところ、この問題はよくある話みたいです。
この手の問題の解決法は、大雑把に「triggerでcreate」か「refresh」かのどちらかで解決するみたいですね。
今回はフォームの変更扱いなのでrefreshで対応しました。

以下のページにズバリありました。
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/basics/

2014/07/01 23:46:01
id:teioh12

ご回答ありがとうございます

無事select2の中身を更新する事ができました。
MSAccessでも同様の事する時はrequeryだのするのが常識だったのに
そこまで考えが及びませんでした。
必要な情報もご提供できない中長い間お付き合い頂きありがとうございました!

2014/07/03 07:59:22
  • id:suenaga3
    全体が見えないのでやりたいことがいまいちわかりませんが、
    setSelect2関数内の3行目と4行目を以下のようにしてもだめですか?

    if(test_json[i].id == s){
    $('#select2').append($('<option></option>')

    if文は変数sと比較するようにして、selectorの対象はselect2にしました。
  • id:teioh12
    suenaga3さん

    ご返答ありがとうございます。
    記載したソースに間違いがありました。suenaga3さんが指摘した通りです。

    やりたいこととしては
    AとBのセレクトメニューが存在し、Aが変更されるとBがそれに関連付けされた値に変更されるという点です。
    A B
    1 あ
    1 い
    1 う
    2 え
    2 お
    上記のような配列を設定していた場合、Aのセレクトメニューで[1]を選べば
    Bでは[あ・い・う]が表示されるといった具合です。
    これだけなら普通に実現できたのですが、Bをマルチ選択可能[multiple="multiple"]を設定すると
    動作がおかしくなります



この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません