0

我在一个 html 页面中有两个选择框，在第一个选择的值更改后，第二个框的值会更新。它可以工作，但第二个选择框的 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);
              }
          });
   }

更新我：

我在这种模式下编辑我的 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 移动样式并没有丢失，选项值已更新，但在选择菜单中仍保留旧选定选项的文本，尽管它不存在于选项列表中。

更新二：

现在，它起作用了！我以这种方式编辑我的代码：

   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());
4

0 回答 0