javascript – jQuery以编程方式选择值 – 奇数问题

我有一个有趣的问题,我似乎无法解决使用 Select2和 FullCalendar.

单击某个事件后,我尝试使用数据库中的内容预先选择Select2下拉列表：

$('#calendar').fullCalendar({
   eventClick: function(calEvent,jsEvent,view) {
            $("#view_event").modal();  //launches bootstrap modal
            $("#client_list_edit").select2();
            $("#client_list_edit").select2("val",calEvent.ClientID);
        }
 });

这是我无法弄清楚的：当我第一次事件点击时,它没有预先填充信息.

但是,当我第二次事件点击(或事件点击日历上的任何其他事件)时,它可以正常选择并显示正确的值.

解决方法

我认为这是你想要的：

http://jsfiddle.net/bU7wj/10/

HTML

<select id="events">
    <option>??????</option>
    <option value="00001">All Day Event</option>
    <option value="00002">Long Event</option>
    <option value="00003">Repeating Event</option>
    <option value="00004">Repeating Event x</option>
    <option value="00005">Meeting</option>
    <option value="00006">Lunch</option>
    <option value="00007">Birthday Party</option>
    <option value="00008">Click for Google</option>
</select>
<div id="calendar"></div>
<div id="view_event" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>More info here…</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Ok</button>
    </div>
</div>

$(function() {

    var events = $('#events');
    var calendar = $('#calendar');
    var modal = $('#view_event');

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    events.select2();
    calendar.fullCalendar({
        eventClick: function(event,view) {

            modal.find('h3').text(event.title);
            modal.modal();
            events.select2('val',event.ClientID);

        },header: {
            left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
        },editable: true,events: [
            {
                title: 'All Day Event',start: new Date(y,m,1),ClientID: '00001'
            },{
                title: 'Long Event',d-5),end: new Date(y,d-2),ClientID: '00002'
            },{
                id: 999,title: 'Repeating Event',d-3,16,0),allDay: false,ClientID: '00003'
            },title: 'Repeating Event x',d+4,ClientID: '00004'
            },{
                title: 'Meeting',d,10,30),ClientID: '00005'
            },{
                title: 'Lunch',12,14,ClientID: '00006'
            },{
                title: 'Birthday Party',d+1,19,22,ClientID: '00007'
            },{
                title: 'Click for Google',28),29),url: 'http://google.com/',ClientID: '00008'
            }
        ]
    });

});

UPDATE

我添加了一个Bootstrap的模态,js库版本是：

> jQuery 1.9.1> Selecr2 3.3.2> fullCalendar 1.6.1> jQuery UI 1.10.2> Bootstrap 2.3.1

原文链接：https://www.f2er.com/jquery/158056.html

javascript – jQuery以编程方式选择值 – 奇数问题

解决方法

猜你在找的jQuery相关文章