jQuery编程选择值-奇怪问题

Question

我有一个有趣的问题，使用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);
        }
 });  

以下是我无法理解的： 当我第一次eventClick时，它不会预填信息。

然而，当我第二次eventClick（或任何其他日历事件）时，它可以正常工作，选择并显示正确的值。

- Dodinas

Answer 1

我认为这个可以按照你的要求工作： 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>

JS

$(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, jsEvent, 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',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2),
                ClientID: '00002'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false,
                ClientID: '00003'
            },
            {
                id: 999,
                title: 'Repeating Event x',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false,
                ClientID: '00004'
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false,
                ClientID: '00005'
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false,
                ClientID: '00006'
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false,
                ClientID: '00007'
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/',
                ClientID: '00008'
            }
        ]
    });

});

更新

我已经添加了一个Bootstrap的弹出框，js库的版本如下：

• jQuery 1.9.1
• Select2 3.3.2
• fullCalendar 1.6.1
• jQuery UI 1.10.2
• Bootstrap 2.3.1

- coma

---

非常感谢Coma，这解决了我和OP一样的问题。这段代码比我看到的其他代码更简单。 - Luis Alvarado

Answer 2

尝试。

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

看起来类似于我遇到的问题。

- JF it

Answer 3

不确定您所指的模态库是什么，但如果它使用setTimeout打开和加载内容，则您的代码会在模态框中有内容之前执行。您可以尝试使用以下方法来查看是否存在这种情况：

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

也许它有类似于https://github.com/tkirda/modal-box的API，以便在内容加载完成后执行代码。

- Tomas Kirda

Answer 4

（这应该是一条注释，但我还没有这个能力）

我认为你应该在$(document).ready中初始化select2，而不是在“eventClick”内部。在“eventClick”内部，你只需要第二行代码$("#client_list_edit").select2("val", calEvent.ClientID);

- nikos.svnk

---

谢谢你的回答。但是，select2已经在$(document).ready中初始化了。我尝试过在“eventClick”内初始化select2和不初始化它，但仍然产生相同的结果。 - Dodinas