log 2 번째 이다. 이번엔 동적 드롭다운(dynamic dropdown) 을 해보려 했다.
기본적이기 때문에 인터넷에 도움말들이 많았고, 원하는 내용을 RailsCasts 에서 찾을 수 있었다.
dynamic select 를 사용하여 만드는 Rails 에서의 첫번째 dynamic dropdown 이다.

"제품 등록" 사용자 스토리 중 다음은 동적 드롭다운을 사용하는 부분이다.

1. 제품을 선택할 때 원산지(나라) 와 농장을 선택한다.
2. 원산지(나라)를 선택하면 농장 선택을 할 수 있는데, 그 나라에 해당하는 농장이 보여주어야 한다.

간단한 스토리이다. 하지만 처음 접하는 레일즈에서 어떻게 구현을 해야 할지 난감 했다.
Log 1 을 보면 dropdown list 구현 방법이 나와 있는데, 나라 리스트의 이벤트를 받아 나라 코드를 가지고 해당 농장을 보여주는 간단한 구현을 railscasts 에 나와 있는데로 자바 스크립트를 사용하였다.

   


모든 농장 리스트를 자바 스크립트에서 받아 DOM 로드 후 (원산지) 나라 리스트의 이벤트를 기다린다.
이벤트가 일어나며 농장 리스트에서 이벤트 시 나라 코드가 일치된 농장 리스트만을 배열에 넣어 농장 등롭 다운 리스트에 보여준다.

등록될 나라들의 농장 리스트가 그리 많지 않기에, 원산지 나라 리스트에서 이벤트를 매번 받아 서버에 접속하는 것 보다는 클라이언트 쪽에서 리스트를 들고 있다가 보여주는게 효율적이라 판단되었다.

RailsCast (http://railscasts.com/episodes/88-dynamic-select-menus) #88 번을 참조하여 만들었으며 주의 해야 할 점은

routes.rb 에 map.js ':controller/:action.:format' 을 첨부해야 한다.


그 외에는 별다르게 주의해야 할 사항은 없다.

신고
Creative Commons License
Creative Commons License

posted by youp_han matrim



티스토리 툴바