Rails에서 눈에 잘 띄지 않는 자바 스크립트를 사용하여 부모 - 자식 선택 드롭 다운 관계

Question

나는 장소와 홀 사이에 매우 단순한 부모 - 자식 관계가있는 응용 프로그램을 가지고 있습니다 (이벤트에는 장소가 있고 장소에는 홀이 많이 있습니다). 관리자 화면 (선택 상자에서 연관을 통해) 장소를 선택하고 해당 장소에 대한 자동 선택 (AJAX JSON 요청)을 (다른 선택 상자의) 자동 채우기로 설정할 수 있기를 원합니다.

이런 종류의 물건은 표준이거나 보석이어야합니다. 더 좋은 옵션이 있습니까?

은 내가 대한 정말 좋은 모양이 있고 발견

Answer 1

내 현재 솔루션 첨부 : How to implement dependent dropdowns in Rails 4 with an unobtrusive jQuery script

나는이를 촬영하고 조금 chosen 제대로 작동하고 만들 bastardised 그것을 작은 간단하고 정정 몇 가지 버그 :

_form.haml :

= simple_form_for(@event, ...) do |f| 
    = f.association :hall, collection: @event.venue.halls.order(:name), include_blank: false, input_html: {class: "chosen", 
    data: {linked: "select", 
      linked_parent_id: "event_venue_id", 
      linked_collection_path: venue_halls_path(":venue_id:")}} 
    = f.association :venue, include_blank: false , :input_html => {class: "chosen"} 

값 및 레이블은 선택 사항입니다

참고 다음은 작동합니다

venue_halls_path  GET  /venues/:venue_id/halls(.:format) halls#index 

일명

... 
resources :venues, shallow: true do 
    resources :halls 
end 
... 

:

data: {linked: "select", 
      linked_parent_id: "event_venue_id", 
      linked_collection_path: venue_halls_path(":venue_id:"), 
      linked_collection_value: "id", 
      linked_collection_label: "name"} 

routes.rb (참고 자료를 통해) 다음과 같은 매핑을 포함

halls_controller.rb :

... 
def index 
    @halls = Venue.find(params[:venue_id]).halls.order(:name) 
    respond_to do |format| 
    format.html {} 
    format.json { render json: @halls.to_json } 
    end 
end 
... 

application.js :

... 
$('select[data-linked=select]').each(function (i) { 
    var child_dom_id = $(this).attr('id'); 
    var parent_dom_id = $(this).data('linked-parent-id'); 
    var path_mask = $(this).data('linked-collection-path'); 
    var path_regexp = /:[0-9a-zA-Z_]+:/g; 
    var option_value = $(this).data('linked-collection-value'); 
    var option_label = $(this).data('linked-collection-label'); 
    var child = $('select#' + child_dom_id); 
    var parent = $('#' + parent_dom_id); 
    var loading_prompt = $('<option value=\"\">').text('Loading options...'); 
    var no_items_prompt = $('<option value=\"\">').text('No options available'); 

    option_value = (option_value === undefined ? "id" : option_value); 
    option_label = (option_label === undefined ? "name" : option_label); 

    parent.on('change', function() { 
    child.attr('disabled', true); 
    child.empty().append(loading_prompt); 
    child.trigger("chosen:updated") 
    if (parent.val()) { 
     var path = path_mask.replace(path_regexp, parent.val()); 
     $.getJSON(path, function (data) { 
     child.empty(); 
     var itemsChanged = false; 
     $.each(data, function (i, object) { 
      if (object[option_value] === undefined) { 
      $.each(object, function (i, subobject) { 
       child.append($('<option>').attr('value', subobject[option_value]).text(subobject[option_label])); 
       itemsChanged = true; 
      }); 
      } else { 
      child.append($('<option>').attr('value', object[option_value]).text(object[option_label])); 
      itemsChanged = true; 
      } 
     }); 
     child.attr('disabled', !itemsChanged); 
     if (!itemsChanged) { 
      child.append(no_items_prompt); 
     } 
     child.trigger("chosen:updated") 
     }); 
    } 
    }); 
});