동적으로 변경 양식 루비 온 레일즈에서 콤보 상자에서 선택한 값에

Question

나는이 다음 테이블을 기반으로. 서비스 유형은 제공되는 서비스의 종류를 정의합니다. 일부 service_type은 신용으로 제공됩니다. isCredit 필드는 부울 1 또는 0 값을 보유합니다. 문제는 사용자가 서비스를 추가 할 때 - 서비스 유형이 채워진 콤보 상자가있는 것입니다. 그러나 내가 필요한 것은 사용자가 isCredit 값이 1 인 서비스 유형을 선택하면 지불 조건 테이블의 지불 조건 옵션이있는 콤보 상자를 동일한 양식에 표시해야한다는 것입니다.

어떻게하면 레일 위의 루비에서이 작업을 수행 할 수 있습니까? 나는 선택한 service_type이 isCredit 값을 가질 때만 payment_term 콤보 상자가 표시되기를 원합니다. 그 밖의 경우 services.payment_terms = 0

Answer 1

먼저 지불 조건이 선택 상자를 숨김으로 렌더링합니다 (예 : 특정 CSS 클래스 사용) . id가 payment_terms이라고 가정합시다. 추가 데이터 서비스 isCredit 0 경우 추적하기 위해 속성으로

다음 서비스를 선택 상자를 렌더링 | 1

<select id=services> 
<% services.each do |service| %> 
    <option value=<%=service.id %> data-iscredit=<%=service.type.isCredit ? '1' : '0' %>><%=service.desc %></option> 
<% end %> 
</select> 

서비스와 쇼를 선택 인구에 change 이벤트를 처리 할 JS에서 간단한 스크립트를 작성/payment_terms을 숨기 depening on isCredit을 선택하십시오. jQuery를 사용하고 있다고 가정합니다.

$("#services").change(function() { 
    var selopt = $(this.children[this.selectedIndex]), 
     isCredit = parseInt(selopt.attr('data-iscredit')); 
    if (isCredit === 0) { 
     $("#payment_terms").hide(); 
    } else { 
     $("#payment_terms").show(); 
    } 
})