Rails 级联菜单的问题,二级联动效果

nicetyler · 发布于 2017年09月08日 · 最后由 bobo 回复于 2017年09月12日 · 285 次阅读
A44eb4

做文档管理部分,我在表单里面做一个二级联动效果,首先判断文档分类,然后根据不同的分类,显示文档对应不同的对象 这是document表里面有个type_id和object_id 这是我的表单内的代码,二级联动部分

<div class="form-group">
  <%= f.label :type_id, "文档分类" %>
  <div>
    <%= f.collection_select :type_id, Type.where(class_code: "DOCUMENT"), :id, :description, class:"form-control" %>
  </div>
</div>
<div class="form-group">
  <%= f.label :object_id, "文档对象" %>
  <div class="doc_obj">
    <%= f.collection_select :object_id, Product.all, :id, :name, class:"form-control" %>
    <%= f.collection_select :object_id, Solution.all, :id, :title, class:"form-control" %>
    <%= f.collection_select :object_id, Case.all, :id, :title, class:"form-control" %>
  </div>
</div>

一开始我写的jquery

$(document).ready(function () {
    $("#document_type_id").change(function () {
        $("#document_type_id option").each(function (i, o) {
            if ($(this).prop("selected")) {
                $(".doc_obj select").hide();
                $(".doc_obj select").eq(i).show();
            }
        });
    });
    $("#document_type_id").change();
});

但是提交的时候会出问题,我选product的id,但是提交的确是case的id,后来我想直接在jquery中插入html代码,但是jqeury里面好像不能直接插erb代码

$(document).ready(function () {
    $("#document_type_id option[value='10']").click(function(){
        $(".doc_obj").html("<%= f.collection_select :object_id, Product.all, :id, :name, class:"form-control" %>")
    })
});

不知道怎么写了,就是表单里面的二级联动,有没有大神能指点迷津,万分感谢

共收到 5 条回复
27861
$(".doc_obj").html("<%= f.collection_select :object_id, Product.all, :id, :name, class:"form-control" %>")

jquery可以插入ruby代码,只是不能再用f.collection_select了,因为f这个对象此时是不存在的,可以尝试用select_tag 或其他的help方法。也可以用ajax 来做,把type_id 传入后台,生成想要的html后直接替换。

A44eb4
27861bobo 回复

嗯我先试下其它的帮助方法,如果不行,我就用ajax来做😂 ajax也好久没用都忘了,看下教程怎么弄,谢了啊

A44eb4
27861bobo 回复

不好意思,我可以在问一下,如果用ajax应该怎么写啊,怎么样能在我选择分类的时候把type_id传给后台啊😭

A44eb4
27861bobo 回复

我每次要提交了才可以上传,如果直接改变分类的时候就能把type_id提交上去那这个问题就解决了

27861
<script>
  $(function({
      $("#type_id").change(function(){
          $.ajax({
              url: xxx_path,
              type: 'get',
              data: { type_id: $('#type_id').val() }
          }).success(data)({
              $('xxx').html(data);
          })
      });
  }))
<script>

大概是这样子吧

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册