javascript - 如何阅读所选项目？

Question

我的视图中有两个选择标签。

<%= select("cod_resource", "description_resource", Resource.all.collect {|p| [ p.description_resource, p.cod_resource] }) %>

<%= select("cod_damage", "description_damage", Damage.find_all_by_cod_resource_id(0).collect {|p| [ p.description_damage, p.cod_damage] }) %>

当用户选择第一个项目标签中的值时，我想更新第二个项目标签中的值。

我在这种模式下编辑我的代码：

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

  <select id="damage" data-theme="c">
    <%= Damage.find_all_by_cod_resource_id(1).each do |r| %>
        <option value="<%= r.cod_damage %>">
          <%= r.description_damage %>
        </option>
    <% end %>
  </select>

我在 application.html.erb 中添加了这个脚本：

function changeValue(obj){
   $("#damage").append("<option>Hello</option>");
}

它工作，但如果我在这种模式下编辑

  function changeValue(obj){
        <%= Damage.find_all_by_cod_resource_id(1).each do |r| %>
      $("#damage").append(" <option value='<%= r.cod_damage %>''><%= r.description_damage %></option>");
      <% end %>
  }

它不起作用。

Answer 1

您必须触发 ajax 请求才能更新第二个选择框。以下文章可帮助您执行此操作http://paramitech.com/dynamically-udating-select-list-using-jquery-and-ajax/

Answer 2

你有多种选择。您可以尝试使用.appen()。这里是一个例子

http://jsbin.com/eguzeb/1/edit

注意：您必须使用 Ajax 来归档您需要的内容。

Answer 3

在浏览器中检查 select 标签，Rails 会在表单标签中给出指定的 id 或 class

<%= select("cod_resource", "description_resource", Resource.all.collect {|p| [ p.description_resource, p.cod_resource] }) %>

<%= select("cod_damage", "description_damage", Damage.find_all_by_cod_resource_id(0).collect {|p| [ p.description_damage, p.cod_damage] }) %>

查找您的选择标签的 id 或类名并尝试此代码

  $('first_select_tag_id/class').change(function(){
      alert($('this').val());
    }

    $('second_select_tag_id/class').change(function(){
      alert($('this').val());
    }

Answer 4

谢谢我用ajax请求解决了我的问题：

这是我的ajax请求：

<script>

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

  </script>

这是html部分的代码

      <select id="resource" 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">
        <select id="damage" data-theme="c">
          <%= Damage.find_all_by_cod_resource_id(params[:resource_id]).each do |r| %>
              <option value="<%= r.cod_damage %>">
                <%= r.description_damage %>
              </option>
          <% end %>
        </select>
      </div>

是工作！！！有一个小问题，它不是在选择框中重新加载 JQuery Mobile 样式。我搜索了这个问题，但我发现的所有解决方案都不起作用。