読者です 読者をやめる 読者になる 読者になる

クズと天才は紙一重

不定期更新です。主に日々の活動記録( ・ㅂ・)و ̑̑

セレクトボックスをAjaxで動的に変える

Ajaxを使って動的にセレクトボックスを変える

config/routes.rbにパスを追加

 

resources bookshelfs do
  get 'ajax' => "bookshelfs#ajax", on: :collection
end

 

viewを編集

 

 = simple_form_for Bookshelf.new do |f|
#changeSelect onchange="entryChange();"
 = f.input :category, collection: @categories, input_html: {id: 'category_select'}
#firstBox
 = f.input :name, collection: @books, input_html: {id: 'name_select'}
 
javascript:
 function entryChange(){
  if(document.getElementById('category_select')){
   category = document.getElementById('category_select').value;
   if(category){
    $.ajax({
     type: 'get',
     url: "/<>bookshelfs/ajax",
     data: {category: category},
     dataType: 'html',
     success: function(data){
      $('#name_select').empty();
      $.each(JSON.parse(data), function(){
       $('#name_select')
        .append($("<option></option>")
         .attr("value",this[0])
         .text(this[1]));
      });
     }
    });
    document.getElementById('firstBox').style.display = "";
   }else{
    document.getElementById('firstBox').style.display = "none";
   }
  }
 }
window.onload = entryChange;

 

controller側を編集

def new
 @categories = [["IT","IT"],["経済","経済"]]
 @books = []
end
 
def ajax
 books = Book.where(category: params[:category])
 render json: books.map{|b| [b.name,b.name]} if request.xhr?
end

 

こんな感じでAjaxを使ってセレクトボックスを動的に変えることができます