场景:一篇文章需要多个标签,其中第一个标签是国家,第二个标签是省,当选择第一个标签的时候,第二个标签的内容相应得到改变。
注意:在使用下面这段代码的过程中,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()