How to call a javascript on dropdown

Question

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.

 <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>

My javascripts:

 <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>

Check if the first script closing tag is really needed. If it does, consider introduce other starting script tag after that. — dlopez
– dlopez, Commented Aug 22, 2016 at 15:39
is this suppose to be in there 'onchange="calendar"'? if not Remove it as it may be causing an error — krisph
– krisph, Commented Aug 22, 2016 at 15:39
Try hiding the calendar after instantiating: $('#calendar').fullCalendar({ ... }).hide() — Dimitri
– Dimitri, Commented Aug 22, 2016 at 15:40
You really don't need a switch statement when you only handle two different situations, just use an if-else. — DBS
– DBS, Commented Aug 22, 2016 at 15:44

liborza · Accepted Answer · 2016-08-22 16:15:17Z

1

You don't need to use switch for just one simple function, by default u can hide it with CSS or if u want to show it when selection is different, u can use IF/ELSE statement..

Everything what u need to do is call the function like this:

On change call:

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

Function in JS:

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

answered Aug 22, 2016 at 16:15

liborza

1,0091 gold badge9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shehzi Over a year ago

It worked. Thanks a lot. How to load the same function on tab. When we click on the tab to display the same function?

Shehzi Over a year ago

I mean the normal tab panel.

Shehzi Over a year ago

In the previous example, I need the javascript to work when I click one drop down. Not all.

liborza Over a year ago

So when u select something, do i understand right, sorry i've been busy

Collectives™ on Stack Overflow

How to call a javascript on dropdown

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related