Question

我有一个下拉列表。在选择选项时，我想显示日历。下拉开关工作正常，但是当网站第一次加载时，日历会被加载。稍后，下拉列表将根据需要运行。请告诉我我在做错的地方。

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

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

Answer 1

您不需要仅使用一个简单的功能切换，默认情况下您可以使用 CSS 隐藏它，或者如果您想在选择不同时显示它，您可以使用< strong> IF / ELSE 声明..

你需要做的就是调用这样的函数：

更改电话：

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

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

如何在下拉列表中调用javascript

1 个答案: