21952


railsで以下のjqueryバージョンで開発しています。  
jquery-rails (2.1.3)  
jquery-ui-rails (2.0.2)

セレクトボックスの値が変更されたら、表示するもの表示しないものを変更し処理をしたいと思っています。  
直接セレクトボックスを操作した際は、change_tmp_sds_flds()が動作し表示を変更します。  
しかし他のjavascriptメソッドで$(hogetmp)の値を変更しても動作しません。  
他のメソッドで$(hogetmp)の値が変わったことを検知して表示を変更させるようにしたいです。

hoge_listは配列です。indexにはidが入っておりセレクトボックスを区別させるためにつけています。

[code]

        $.each(hoge_list,function(index,val){
          var hogetmp = '#'+index+'_tmpid';
          $(hogetmp).change(function() { change_tmp_sds_flds() });
        });
    
[/code]

表示を制御している箇所でhoge_idに一致するものだけ表示させています。

[code]

        function change_hoge_tmps_flds() {
          $('div.hoge_tmps_flds').each(function() {
            $(this).find(':input, :radio').attr('disabled', true);
            $(this).hide();
          });
          var hoge_id = $('#poge_hogeid').attr('value');
          var hoge_tmps_flds_id = 'div.hoge_'+hoge_id+'_tmps_flds';
          $(hoge_tmps_flds_id).find(':input, :radio').attr('disabled', false);
          $(hoge_tmps_flds_id).show();
          change_tmp_sds_flds();
        }
    
[/code]

セレクトボックスの部分です。

[code]

            <% @hoge_tmps.each do |hogeid, tmps| %>
              <%= f.controls(:tmpid, :class => "hoge_#{hogeid}_tmps_flds hoge_tmps_flds", :style => "display: none;") do %>
                <%= select_tag "#{hogeid}_tmpid", option_groups_from_collection_for_select(tmps, :tmps, :groupname, :id, :name, f.object.try(:tmpid)), {:class => "classname"} %>
              <% end %>
            <% end %>
    
[/code]

値を変更した時javascriptを呼び出すか所です。

[code]

        $('#poge_hogeid').change(function() { change_hoge_tmps_flds() });
    
[/code]

javascriptで値を変更した時、発火させたいfunctionです。

[code]

        function change_tmp_sds_flds() {
          $('div.tmp_sds_flds').each(function() {
            $(this).find(':input, :radio').attr('disabled', true);
            $(this).hide();
          });
          var hoge_id = $('#poge_hogeid').attr('value');
          var hogetmp = '#'+hoge_id+'_tmpid';
          var tmp_id = $(hogetmp).attr('value');
          var tmp_sds_flds_id = 'div.tmp_'+tmp_id+'_sds_flds';
          $(tmp_sds_flds_id).find(':input, :radio').attr('disabled', false);
          $(tmp_sds_flds_id).show();
        }
    
[/code]

ここのセレクトボックスが変更されると、change_hoge_tmps_fldsが呼ばれ、change_tmp_sds_fldsが実行されるようにしたいです。

[code]

          <%= f.select_frame :hogeid, select_list(@hoges, [:name], {:id=> 'id'}) %>   
    
[/code]

回答いただいた通りfunction change_hoge_tmps_flds()の所にchange_tmp_sds_flds()
を入れると確かに動くようになりました。


CC BY-SA 3.0
2016-02-10T08:47:22.790
21939
2016-02-16T14:10:54.660
2016-02-16T14:10:54.660
10851
10851
question
ruby-on-rails ruby jquery jquery-ui
jqueryのセレクトボックスで別メソッドで値が変更されても処理が動いてくれない


jQueryのchange()はHTML規格で定義されている'change'イベントそのままですので、 **ユーザが**
フォームコントロールの値を変更したときのみ発火します。

JavaScriptから値を変更した場合は発火しませんので、値を変更するコードで明示的に処理を呼んであげる必要があります。

[code]

    $('#' + index + '_tmpid').val(...);
    change_tmp_sds_flds();
    
[/code]

追記:  
<https://stackoverflow.com/questions/3179385/val-doesnt-trigger-change-in-
jquery>  
`.change()` や `.trigger('change')` でも良いようです。


CC BY-SA 3.0
2016-02-10T15:24:03.820
21952
2016-02-10T15:24:03.820
2017-05-23T12:38:56.467
-1
3475
21939
answer