드롭 다운 값을 기준으로 양식 요소 표시/숨기기

Question

일부 필드가 필수이고 일부는 필수적이지 않은 양식이 있어야합니다. 두 개의 조건이 먼저있는 양식에서 드롭 다운을 사용합니다. "모두 표시 필드 "이고 다른 하나는"필수 필드 만 표시 "입니다. 이제 사용자가"모든 필드 표시 "를 선택하면 모든 필드가 표시되고 사용자가"필수 필드 만 표시 "를 선택하면 필수 필드 만 표시됩니다.

<form:form method="POST" action="addCountry.htm" commandName="countryForm" id="countryForm"> 
    <table> 

    <tr> 
     <td>Select fields:</td> 
     <td align="center"> 
      <select name="fields"> 
       <option value="non mandatory">show all fields</option> 
       <option value="mandatory">show only mandatory fields</option> 
      </select> 
     </td> 
    </tr> 

     <tr> 
      <td>Country Name :</td> 
      <td><form:input path="countryName"/> 
      </td> 
     </tr> 
     <tr> 
      <td>Country ISD Code :</td> 
      <td><form:textarea path="countryISDCode" /> 
      </td> 
     </tr> 
     <tr> 
      <td>Nationality :</td> 
      <td><form:textarea path="nationality"/></td> 
     </tr> 

     <tr> 
      <td colspan="3"><input type="submit" value="submit"/></td> 
     </tr> 
    </table> 
</form:form> 

국가 이름과 국가 ISD 코드는 필수이며 국적 내가 이러한 필드를 표시하려면 선택 드롭 다운에 기초 mandatory.Now되어 있지 않은 예로서이 형태를 취한다.

감사 Brajesh

Answer 1

당신은 u는 인덱스를 확인하거나 u는 원하는 것을 할 것 인덱스/값에 따라 값을 확인한다는 점에서 드롭 다운 변경 이벤트를 작성해야합니다. 귀하의 요구 사항에 따라 표시 할 수있는 것을 의미합니다.

Answer 2

각 필수가 아닌 필드 각각에 non-mandatory 클래스를 할당하십시오. 그런 다음이 아닌 필수 필드가 표시 여부를 전환하는 버튼에 이벤트 핸들러를 첨부 :

$('#myButton').on('click', function() { 
    $('.non-mandatory').toggle(); 
}); 

Answer 3

방금 ​​입력 요소/제어 또는 전체 테이블 행을 숨기시겠습니까? 두 경우 모두 CSS 클래스를 해당 DOM 요소에 적용한 다음 드롭 다운 목록의 onchange 이벤트를 바인딩하여 선택한 값을 기반으로 숨기기 및 표시를 처리 할 수 ​​있습니다.

그래서 경우에 각 당신이의 CSS 클래스를 적용 할 수 그럴 필요를 위해, 전체 테이블 행을 숨기려하거나 다음 자바 스크립트에서 다음 작업을 수행 할 수있는 "필수"와 "비 당연직"

$('#myDropdownlist').con('change', function() { 
    if ($(this).val() === 'mandatory') { 
     $('.nonMandatory').hide(); 
     $('.mandatory').show(); 
    } else { 
     $('.nonMandatory').show(); 
     $('.mandatory').hide();    
    } 
}); 

을

희망하는 사람