How to call a javascript on dropdown
<p>I have the a dropdown list. On selecting an option I want to display a calendar. The drop down switches work fine, but the calendar gets loaded when the website loads first time. Later the dropdown list functions as required. Please tell where I am doing the mistake.</p>

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

<p>My javascripts:</p>

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






   $(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' }
        ]
    });

});

 &lt;/script&gt;
</code></pre>