美文网首页
二级联动

二级联动

作者: Jayzen | 来源:发表于2016-10-13 22:01 被阅读35次

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

注意:在使用下面这段代码的过程中,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()

相关文章

网友评论

      本文标题:二级联动

      本文链接:https://www.haomeiwen.com/subject/zzawyttx.html