자바 스크립트를 사용하여 드롭 다운 선택에 따라 테이블 표시

안녕하세요, 저는 드롭 다운 선택에 따라 표시되고 숨겨져있는 요소를 전환하는 데 문제가 있습니다. 나는 여러 가지 일을 시도했지만 그 일을하기 위해 볼 수는 없습니다.자바 스크립트를 사용하여 드롭 다운 선택에 따라 테이블 표시

UPDATE: This is the new code that I tried out, but still nothing is working 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 



<script type="text/javascript"> 
$(document).ready(function() { 
    $('#TypeOfChange').change(function() { 
     if ($(this).val() == 'Option 1') { 
      $('#Table1').css({'display': 'block'}); 
      $('#RequestTypeTableTR').css({'display': 'block'}); 
     } else { 
      $('#Table1').css({'display': 'none'}); 
      $('#RequestTypeTableTR').css({'display': 'none'}); 
     } 

     if ($(this).val() == 'Option 2') { 
     $('#Table2').css({'display': 'block'}); 
     $('#RequestTypeTableTR').css({'display': 'block'}); 
    } else { 
     $('#Table2').css({'display': 'none'}); 
     $('#RequestTypeTableTR').css({'display': 'none'}); 
    } 
}); 
}); 
</script> 


</head><body> 

       <form id="form1" name="form1" method="POST" action="<%=MM_editAction%>"> 
       <table border="0" class="form"> 

        <tr valign="baseline" class="clear"> 
        <td align="right" valign="middle" nowrap="nowrap" class="style8"><h2>General Information</h2></td> 
        <td valign="baseline">&nbsp;</td> 
        </tr> 


        <tr valign="baseline" class="clear"> 

        <td align="right" valign="top" nowrap="nowrap" class="style9"> 
         <p>*Request Type:</p> 
         </td> 
        <td valign="top" class="style8"> 
         <p> 
         <span id="spryselect5"> 
          <label> 
          <select name="TypeOfChange" id="TypeOfChange"> 
           <option value="Please Select" selected="selected">Please Select</option> 
           <option value="Option 1">Option 1</option> 
           <option value="Option 2">Option 2</option> 
           <option value="Option 3">Option 3</option> 
           <option value="Option 4">Option 4</option> 
           <option value="Option 5">Option 5</option> 
           </select> 
          </label> 

          <span class="selectInvalidMsg">Please select a valid item.</span><span class="selectRequiredMsg">Please select an item.</span> 
          </span> 
         <span class="style1">*</span> 
         </p> 
         </td> 
        </tr> 
        <tr style="display:none" id="RequestTypeTableTR" valign="baseline" class="clear"> 
        <td valign="middle" nowrap="nowrap">&nbsp;</td> 
        <td valign="baseline"> 


         <table style="display:none" id="Table1" width="100%"> 
         <tr> 
          <td Colspan="2" align="right" valign="middle" nowrap="nowrap" class="style8"><h2>Patient Safety1</h2></td> 
          </tr> 

         </table> 


         <table style="display:none" id="Table2" width="100%"> 
         <tr> 
          <td Colspan="2" align="left" valign="middle" nowrap="nowrap" class="style8"><h2>Patient Safety2</h2></td> 
          </tr> 

         </table> 
         </td> 
        </tr> 
        </table></FORM>

출처

2017-03-03 WebCoder1234

'옵션 1'에 대한 코드가'change' 함수 외부에 있습니다. – callback

난 당신이 코드에 구문 오류가 많이 있다고 생각 : 아래는 내가 사용하고 HTML 코드의 샘플입니다. 예를 들어 , 여기 당신은 기능 변화를 폐쇄하고, 그래서 당신의 나머지 코드는 이벤트 "변화"

else { 
    $('#Table2').css({'display':'none'}) 
    $('#RequestTypeTableTR').css({'display':'none'}); 
     } 
    });

출처

2017-03-03 13:01:48 mpalma

이것은 당신의 자바 스크립트 코드 들여 쓰기를 정리하는 올바른 방법입니다 밖에 :

$(document).ready(function() { 
    $('#TypeOfChange').change(function() { 
     if ($(this).val() == 'Option 1') { 
      $('#Table1').css({'display': 'block'}); 
      $('#RequestTypeTableTR').css({'display': 'block'}); 
     } else { 
      $('#Table1').css({'display': 'none'}); 
      $('#RequestTypeTableTR').css({'display': 'none'}); 
     } 

     if ($(this).val() == 'Option 2') { 
      $('#Table2').css({'display': 'block'}); 
      $('#RequestTypeTableTR').css({'display': 'block'}); 
     } else { 
      $('#Table2').css({'display': 'none'}); 
      $('#RequestTypeTableTR').css({'display': 'none'}); 
     } 
    }); 
});

을

실수로 많은 실수를하지 않으므로 항상 들여 쓰기 된 코드를 코딩해야합니다.

출처

2017-03-03 13:05:41

팁과 예제를 제공해 주셔서 감사합니다. 내가 그것을 시도 할 때, 나는 여전히 같은 결과를 얻고있다. 하나의 테이블 만 표시되고 다른 옵션을 선택하면 테이블이 숨겨 지지만 다른 테이블은 표시되지 않습니다. – WebCoder1234

Try this 



    $(document).ready(function() { 
     $('#TypeOfChange').change(function() { 
      if ($(this).val() == 'Option 1') { 
       $('#Table1').css({'display': 'block'}); 
       $('#Table2').css({'display': 'none'}); 
       $('#RequestTypeTableTR').css({'display': 'block'}); 
      } else if($(this).val() == 'Option 2') { 
       $('#Table2').css({'display': 'block'}); 
       $('#RequestTypeTableTR').css({'display': 'block'}); 
       $('#Table1').css({'display': 'none'}); 
      }else{ 
       $('#Table2').css({'display': 'none'}); 
       $('#RequestTypeTableTR').css({'display': 'none'}); 
       $('#Table1').css({'display': 'none'}); 
      } 
     }); 
    });

else 섹션에는 주 테이블이 숨겨져 있습니다. 이것이 문제입니다 희망이 있습니다.

출처

2017-03-03 13:30:05 CaptainHere

다른 제안 사항이 있습니까? 나는이 코드도 시도했다. 그리고 지금은 어떤 테이블도 보여주고 있지 않습니까? 나는 여기서 완전히 잃어 버렸어. 여기에 JSFiddle 내가 사용하고 있습니다 : https://jsfiddle.net/bvc1ndbw/ – WebCoder1234

당신은 jquery 라이브러리를 포함해야합니다. 이것은 일반적인 자바 스크립트가 아닙니다. – CaptainHere

https://jsfiddle.net/bvc1ndbw/2/ – CaptainHere

자바 스크립트를 사용하여 드롭 다운 선택에 따라 테이블 표시

답변

관련 문제