2016-08-22 3 views
0

드롭 다운 목록이 있습니다. 옵션을 선택할 때 달력을 표시하려고합니다. 드롭 다운 스위치는 정상적으로 작동하지만 웹 사이트를 처음로드 할 때 캘린더가로드됩니다. 나중에 드롭 다운 목록은 필요한대로 작동합니다. 내가 실수를하고있는 곳을 알려주십시오.드롭 다운시 자바 스크립트 호출 방법

<form class="form-horizontal form-label-left top_margin"> 
         <div class="form-group"> 
        <label class="control-label col-md-3 col-sm-3 col-xs-12">Select The Class/Batch</label> 
        <div class="col-md-6 col-sm-6 col-xs-12"> 
         <select class="form-control" id="division" onchange="calendar"> 
         <option>Select One</option> 
         <option value="1">Standard 1 Divison A</option> 
         <option value="2">Standard 1 Divison B</option> 
         <option value="3">Standard 1 Divison C</option> 
         <option value="4">Standard 1 Divison D</option> 
         </select> 
        </div> 
        </div> 
        <br> 
        <br> 
        <br> 
        </form> 
        <div id="caldisplay"> 
         <div id='calendar'></div> 
        </div> 

내 자바 스크립트가 :

<script> 
    $('#division').on('change',function(){ 
var selection = $(this).val(); 
switch(selection){ 
case "1": 
$("#caldisplay").show() 
break; 
default: 
$("#caldisplay").hide() 
} 
}); 
</script> 






    $(function() { // document ready 

    $('#calendar').fullCalendar({ 
     now: '2016-05-07', 
     editable: true, 
     aspectRatio: 1.8, 
     scrollTime: '00:00', 
     header: { 
      left: 'prev,next', 
      center: 'title', 
      right: 'timelineMonth,timelineYear' 
     }, 
     defaultView: 'timelineMonth', 
     resourceAreaWidth: '25%', 
     resourceLabelText: 'Students', 
     resources: [ 
      { id: 'a', title: 'John Doe A' }, 
      { id: 'b', title: 'John Doe B' }, 
      { id: 'c', title: 'John Doe C' }, 
      { id: 'e', title: 'John Doe E' }, 
      { id: 'f', title: 'John Doe F' }, 
      { id: 'g', title: 'John Doe G' }, 
      { id: 'h', title: 'John Doe H' }, 
      { id: 'i', title: 'John Doe I' }, 
      { id: 'j', title: 'John Doe J' }, 
      { id: 'k', title: 'John Doe K' }, 
      { id: 'l', title: 'John Doe L' }, 
      { id: 'm', title: 'John Doe M' }, 
      { id: 'n', title: 'John Doe N' }, 
      { id: 'o', title: 'John Doe O' }, 
      { id: 'p', title: 'John Doe P' }, 
      { id: 'q', title: 'John Doe Q' }, 
      { id: 'r', title: 'John Doe R' }, 
      { id: 's', title: 'John Doe S' }, 
      { id: 't', title: 'John Doe T' }, 
      { id: 'u', title: 'John Doe U' }, 
      { id: 'v', title: 'John Doe V' }, 
      { id: 'w', title: 'John Doe W' }, 
      { id: 'x', title: 'John Doe X' }, 
      { id: 'y', title: 'John Doe Y' }, 
      { id: 'z', title: 'John Doe Z' } 
     ], 
     events: [ 
      { id: '1', resourceId: 'b', start: '2016-05-07', end: '2016-05-07', title: 'X' }, 
      { id: '1', resourceId: 'b', start: '2016-05-06', end: '2016-05-06', title: 'X' }, 
      { id: '2', resourceId: 'c', start: '2016-05-07', end: '2016-05-07', title: 'O' }, 
      { id: '3', resourceId: 'd', start: '2016-05-06', end: '2016-05-06', title: 'O' }, 
      { id: '4', resourceId: 'e', start: '2016-05-07', end: '2016-05-07', title: 'X' }, 
      { id: '5', resourceId: 'f', start: '2016-05-07', end: '2016-05-07', title: 'X' } 
     ] 
    }); 

}); 

</script> 
+0

확인합니다. 그렇다면 다른 시작 스크립트 태그를 소개하십시오. – dlopez

+0

이 'onchange = "calendar"'에 있을까요? 오류가 발생할 수 있으므로 제거하십시오 – krisph

+0

$ ('# calendar') fullCalendar ({...}). hide() – Dimitri

답변

1

당신은 유 CSS으로 숨길 수 있습니다 또는 u 원하는 경우 때 선택을 보여 기본적으로 하나 개의 간단한 기능에 스위치를 사용할 필요가 없습니다

:/ELSE 문 ..

u는해야 할 일을

모든 것이 이런 식으로 함수를 호출하는 경우 다른, u는 을 사용할 수 있습니다 변경 호출에

: JS에서

<select class="form-control" id="division" onchange="calendar()"> 

기능 : 첫 번째 스크립트는 닫는 태그가 정말 필요한 경우

function calendar() { 
     $calendar = $('#calendar'); 
     $calendar.show(); 

     $calendar.fullCalendar({ 
      now: '2016-05-07', 
      editable: true, 
      aspectRatio: 1.8, 
      scrollTime: '00:00', 
      header: { 
       left: 'prev,next', 
       center: 'title', 
       right: 'timelineMonth,timelineYear' 
      }, 
      defaultView: 'timelineMonth', 
      resourceAreaWidth: '25%', 
      resourceLabelText: 'Students', 
      resources: [ 
       { id: 'a', title: 'John Doe A' }, 
       { id: 'b', title: 'John Doe B' }, 
       { id: 'c', title: 'John Doe C' }, 
       { id: 'e', title: 'John Doe E' }, 
       { id: 'f', title: 'John Doe F' }, 
       { id: 'g', title: 'John Doe G' }, 
       { id: 'h', title: 'John Doe H' }, 
       { id: 'i', title: 'John Doe I' }, 
       { id: 'j', title: 'John Doe J' }, 
       { id: 'k', title: 'John Doe K' }, 
       { id: 'l', title: 'John Doe L' }, 
       { id: 'm', title: 'John Doe M' }, 
       { id: 'n', title: 'John Doe N' }, 
       { id: 'o', title: 'John Doe O' }, 
       { id: 'p', title: 'John Doe P' }, 
       { id: 'q', title: 'John Doe Q' }, 
       { id: 'r', title: 'John Doe R' }, 
       { id: 's', title: 'John Doe S' }, 
       { id: 't', title: 'John Doe T' }, 
       { id: 'u', title: 'John Doe U' }, 
       { id: 'v', title: 'John Doe V' }, 
       { id: 'w', title: 'John Doe W' }, 
       { id: 'x', title: 'John Doe X' }, 
       { id: 'y', title: 'John Doe Y' }, 
       { id: 'z', title: 'John Doe Z' } 
      ], 
      events: [ 
       { id: '1', resourceId: 'b', start: '2016-05-07', end: '2016-05-07', title: 'X' }, 
       { id: '1', resourceId: 'b', start: '2016-05-06', end: '2016-05-06', title: 'X' }, 
       { id: '2', resourceId: 'c', start: '2016-05-07', end: '2016-05-07', title: 'O' }, 
       { id: '3', resourceId: 'd', start: '2016-05-06', end: '2016-05-06', title: 'O' }, 
       { id: '4', resourceId: 'e', start: '2016-05-07', end: '2016-05-07', title: 'X' }, 
       { id: '5', resourceId: 'f', start: '2016-05-07', end: '2016-05-07', title: 'X' } 
      ] 
     }); 
    } 
+0

그것은 효과가있다. 고마워. 같은 기능을 탭에로드하는 방법. 탭을 클릭하여 동일한 기능을 표시 할 때? – Shehzi

+0

오신 것을 환영합니다. 탭이란 무엇입니까? – liborza

+0

정상적인 탭 패널을 의미합니다. – Shehzi