2016-10-26 2 views
0

사용자가 왼쪽 선택 상자에서 오른쪽으로 IP 주소를 이동할 수있는 다중 선택 양식을 만들려고합니다 (그 개체가 무엇인지 불확실합니다).레일 복수 선택 양식

내가 내 기본적인 형태 코드를 가지고 있지만, 그것은 (필자는 관련이없는 코드를 촬영했습니다) 대신 드롭 다운을 보여주는 것 :처럼 보이는 어떤

<%= form_for @network_host_groups do |f| %> 
    <%= f.select :network_hosts, @network_hosts.collect { |n| [ n.ip_address, n.id ] } multiple: true, include_blank: false %> 
    <%= f.submit "Add", class: "btn btn-success" %> 
<% end %> 

그러나

enter image description here

, 나는 다음과 같이하려고 노력하고있다 :

enter image description here

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 생성 된 HTML <select> 태그를 포함하는 레일 옵션, 추가 속성에 대한 html_options-options :

답변

0

당신이 the docs for select을 살펴 경우는이 개 옵션 세트를 취 볼 수 있습니다. 이러한 별도의 해시 전달 될 필요가 있으므로 multiple는 HTML 속성 인 반면

include_blank는, 레일 옵션입니다 : 또한

, 그것은 당신이를 분실 한 질문을 게시하는 코드를 정리하는 경우처럼 보인다 쉼표로 끝나면 다시 시도 할 때 포함되어 있는지 확인하십시오.

그 이유는 사용 가능한 호스트가 목록 대신 단일 항목 드롭 다운으로 나타나는 이유입니다. "사용 가능한"목록과 "할당 된"목록 간의 이동은 단일 질문의 범위를 벗어납니다.

+0

좋아, 프레젠테이션을 알아 냈어.하지만 그 논리는 어떻게 생겼지? 왼쪽 측면에는 제출할 전달할 양식 요소가 실제로 포함될 수 없으므로 오른쪽의 개체 만 컨트롤러 작업을 수행해야합니다. 내가 잘못? – Godzilla74

+0

맞아. 간단히 말해, 왼손 * Available * 목록은'select_tag' 헬퍼를 사용하여 생성 될 가능성이 있습니다. 즉, 적절한 IP 주소로 처음 채워진'f.select ... '를 사용하여 모델 속성 중 하나에 바인딩되지 않습니다 .. 그리고 나서 2 개의 화살표는 2 개의 목록 사이에서 항목을 이동시키는 JavaScript 바인딩을 필요로합니다. – mikej