ruby-on-rails - RubyOnRails - ajax リクエスト後に selectbox が jquery モバイルスタイルをリロードしない

Question

HTMLページに2つの選択ボックスがあり、最初の選択で値が変更された後、2番目のボックスの値が更新されます。動作しますが、2 番目の選択ボックスの jquery モバイル スタイルはリロードされません。

これはhtmlコードです：

   <select id="report_cod_resource_id" name="report[cod_resource_id]" data-theme="c" onchange="changeValue(this)">
     <%= Resource.find(:all).each do |r| %>
        <option value="<%= r.cod_resource %>">
          <%= r.description_resource %>
        </option>
    <% end %>
   </select>

  <!-- Home -->
  <div id="damage_list" Blockquote
    <select id="report_cod_damage_type_id" name="report[cod_damage_type_id]" data-theme="c" style="width:100%;">
      <%=
          if params[:resource_id]
            @resid=params[:resource_id];
          else
            @resid=1
          end
      %>
       <%= Damage.find_all_by_cod_resource_id(@resid).each do |r| %>

          <option value="<%= r.cod_damage %>">
            <%= r.description_damage %>
          </option>
      <% end %>
    </select>
  </div>

これはajax呼び出しです：

function changeValue(obj){
          resource_id = $("#report_cod_resource_id").val();
          $.ajax({
              type: "GET",
              url: "/reports/new",
              data: "resource_id="+resource_id,
              success: function(html){
                  var part= $("<div/>").append(html).find('#damage_list').html();
                  $("#damage_list").html(part);
              }
          });
   }

更新I：

このモードで js コードを編集します。

$(document).ready(function() {
      $("#report_cod_resource_id").bind( "change",function(event, ui) {
          var part;
          resource_id = $("#report_cod_resource_id").val();
          $.ajax({
              type: "GET",
              url: "/reports/new",
              data: "resource_id="+resource_id,
              success: function(html){
                  part= $("<select/>").append(html).find('#report_cod_damage_type_id').html();
                  $("#report_cod_damage_type_id").empty().append(part);
              }
          });
          $("#report_cod_damage_type_id").selectmenu('refresh');
      });
  });

現在、jquery モバイル スタイルは失われておらず、オプションの値は更新されていますが、選択メニューには、オプション リストには表示されていませんが、古い選択オプションのテキストが残ります。

更新 II:

今、それは動作します!!! この方法でコードを編集します。

   function changeValue(){
              var part;
              resource_id = $("#report_cod_resource_id").val();
              $.ajax({
                  type: "GET",
                  url: "/reports/new",
                  data: "resource_id="+resource_id,
                  success: function(html){
                      part= $("<select/>").append(html).find('#report_cod_damage_type_id').html();
                      $("#report_cod_damage_type_id").empty().append(part);
                      $("#damage_list").find('.ui-btn-text').text($("#report_cod_damage_type_id option:selected").text());
                  }
              });
      }

「オプション」タグを追加しただけなので、スタイルは失われません。このモードでは、新しいオプションが再ロードされますが、「選択ボックス」の古い選択テキストは変更されません!!! だから私はこのコード文字列で「選択ボックス」のテキストを変更しました：

$("#damage_list").find('.ui-btn-text').text($("#report_cod_damage_type_id option:selected").text());