二级联动

场景:一篇文章需要多个标签,其中第一个标签是国家,第二个标签是省,当选择第一个标签的时候,第二个标签的内容相应得到改变。

注意:在使用下面这段代码的过程中,rails5.0的环境中使用turbolinks,下面的js代码是无效的,因此在项目中需要去除turblinks5,方式是在gemfile文件和application.js文件中去掉相应的turblinks5。

#建立三个model
rails g scaffold tag_one name:string
rails g scaffold tag_two name:string
rails g scaffold article content:string tag_one:references tag_two:references

#在articles/_form.html.erb,使用collection_select和grouped_collection_select
<div class="field">
  <%= f.label :tag_one_id %>
  <%= f.collection_select(:tag_one_id, TagOne.all, :id, :name)%>
</div>

<div class="field">
  <%= f.label :tag_two_id %>
  <%= f.grouped_collection_select(:tag_two_id, TagOne.all, :tag_twos, :name, :id, :name) %>
</div>

#使用article.js.coffee
jQuery ->
  $('#article_tag_two_id').parent().hide()
  tag_twos = $('#article_tag_two_id').html()
  console.log(tag_twos)
  $('#article_tag_one_id').change ->
    tag_one = $('#article_tag_one_id :selected').text()
    console.log(tag_one)
    options = $(tag_twos).filter("optgroup[label=#{tag_one}]").html()
    console.log(options)
    if options
      $('#article_tag_two_id').html(options)
      $('#article_tag_two_id').parent().show()
    else
      $('#article_tag_two_id').empty()
      $('#article_tag_two_id').parent().hide()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容