다른 옵션을 선택한 후 테이블 숨기기/표시

2 개의 테이블 "iu"및 "si"가 있으며 사용자가 볼 수있는 항목을 선택하기위한 드롭 다운 목록을 넣습니다. 옵션을 선택하면 해당 테이블이 나타납니다.다른 옵션을 선택한 후 테이블 숨기기/표시

다른 페이지는 숨겨져 있지만 페이지가로드되면 기본 테이블 "si"가 표시됩니다.

<script> 
    $(document).ready(function() 
    { 
     $('#iu_table').hide(); 
    }); 
    $('#iu').onchange=function() 
    { 
     $('#si_table').hide(); 
     $('#iu_table').toggle(); 
    } 
</script>

그리고 HTML 코드 :

<select> 
     <option id="si" selected>SI</option> 
     <option id="iu">IU</option> 
    </select>

테이블 ID는 각각 "si_table"와 "ui_table"입니다

여기 내 자바 스크립트 코드입니다.

위 코드를 사용했지만 작동하지 않습니다. 어떤 것을 선택하든 "si"테이블 만 표시됩니다.

누군가 도와 주시면 좋겠습니다.

출처

2013-07-08 Hongxuan

입니다.이 링크를 참조하면 도움이 될 것입니다. http://stackoverflow.com/questions/1240205/how-to-hide-show-select-boxes-depending-on-other-choosed-select-box- 옵션 – Bharu

당신은 아마 jQuery를의 튜토리얼 작업 및 라이브러리의 동작으로 자신을 familarize해야에게 드롭 다운을 id 속성을 추가했습니다.

더 필드 onchange를가 없습니다 :

코드에서 여러 오류가 있습니다. 원하는 내용은 여기에 설명 된 jQuery의 변경 기능입니다. http://api.jquery.com/change/
변경 기능의 코드는 $ (document) .ready 함수에 속하므로 문서가로드 될 때 jquery가이를 실행합니다. 코드가 거기에서 실행되어야하므로 select가 변경 될 때 함수가 호출됩니다.
옵션을 변경하지 않고 선택 변경을 원합니다.
변경 기능의 본문에서 한 테이블을 숨기고 다른 테이블을 토글합니다. 둘 다 토글합니다. 옵션을 선택하면 첫 번째 테이블도 표시 될 수 있습니다. 또한이 구조는 정확히 2 개의 옵션에만 적용됩니다. 더 많은 옵션을 원한다면, Paritosh의 답처럼 뭔가를해야만합니다. 여기

는 작업 예제입니다 :

처음에 IU 테이블을 숨길 필요로 toggle()이 , 당신은 몇 가지를해야합니다라고 숨기기/표시 일치하는 요소를하지 jQuery를의 방법이 있습니다

<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script> 
    $(document).ready(function() 
    { 
     $('#iu_table').hide(); 
     $('#selector').change(function() 
      { 
       $('#si_table').toggle(); 
       $('#iu_table').toggle(); 
      }); 
    }); 

</script> 
</head> 
<body> 
<div id="si_table">si</div> 
<div id="iu_table">iu</div> 
<select id="selector"> 
     <option id="si" selected="selected">SI</option> 
     <option id="iu">IU</option> 
</select> 
</body>

출처

2013-07-08 06:53:32 Silahe

고마워! 나는 자바 스크립트 초보자이다. 이것은 js를 사용하는 나의 처음이다. 나는 jquery 튜토리얼을 따라갈 것이고 앞으로 더 많이 연구 할 것이다. 비판과 해결책에 감사드립니다. LOL .. =) – Hongxuan

하지만이 방법은 3 개 이상의 테이블이있는 경우 효과가없는 것 같습니다 ... – Hongxuan

내가 마지막 글 머리 부분에서 말한 것처럼. – Silahe

이 방법에는 여러 가지가 있습니다. 하나는 다음과 같습니다 - 내가 제어

<select id="myselection"> 
    <option id="si" selected>SI</option> 
    <option id="iu">IU</option> 
</select> 

<script> 
$('#myselection').bind('change', function(){ 
    if($('#myselection option:selected').attr('id') == "si"){ 
     $('#si_table').show(); 
     $('#iu_table').hide(); 
    } 
    else if($('#myselection option:selected').attr('id') == "iu"){ 
     $('#si_table').hide(); 
     $('#iu_table').show(); 
    } 
}); 
</script>

출처

2013-07-08 06:31:27 Paritosh

그것에 대한 CSS 트릭. 따라서 IU 테이블에 display:none;을 입력하고 드롭 다운 값 변경을 토글하십시오. 작동하는 바이올린은 here

출처

2013-07-08 07:13:00

다른 옵션을 선택한 후 테이블 숨기기/표시

답변

관련 문제