在我的页面上,我使用一个下拉框来过滤哪些事件显示在fullCalendar()
上。我的代码如下:
JavaScript
$(document).ready - >
$("#msCalendar").fullCalendar({
header: left: "prev today"
center: "title"
right: "month,basicWeek next"
editable: true
events: "marketingSchedule"
eventRender: (event, element, view) - >
return ['all', event.quoted_by].indexOf($('#msQuotedBy').val()) >= 0
eventClick: (event) - >
setTimeout(- >
eventClickFunction(event)
)
})
$('#msQuotedBy').change - >
$('#msCalendar').fullCalendar('rerenderEvents')
HTML
<span id="msQuotedBySearch">
<b>Filter by Initials: </b>
<select id="msQuotedBy">
<option value="all">All</option>
<option value="ZR">ZR</option>
<option value="TM">TM</option>
<option value="jh">jh</option>
<option value="TD">TD</option>
<option value="LG">LG</option>
<option value="BCS">BCS</option>
<option value="DLH">DLH</option>
<option value="jr">jr</option>
<option value="CP">CP</option>
<option value="LR">LR</option>
<option value="SA">SA</option>
<option value="TN">TN</option>
<option value="DB">DB</option>
<option value="TF">TF</option>
<option value="dev">dev</option>
<option value="BK">BK</option>
</select>
</span>
使用这两个代码块,我的日历可以正确更新。显然,HTML应该更好,因为它不会与数据库中的用户一起动态更新下拉框。
我已经在 HTML 中尝试过此操作,它可以正确填充下拉框,但不再更新日历。
<span id="msQuotedBy">
<b>Filter by Initials: </b>
<%= collection_select(:user, :initials, User.all, :id, :initials) %>
</span>
关于如何使用collection_select()
或其他方法过滤日历的任何想法?
答案 0 :(得分:1)
在第二个示例(使用Rails)中,存在一个问题:
<span id="msQuotedBy">
在您的手工编码示例中,“ msQuotedBy”是所选内容的ID,而不是跨度。在JS中,$('#msQuotedBy').val()
尝试从ID为“ msQuotedBy”的HTML元素中读取并获取其值。 <spans
没有值,但是<selects
有值。
您已经通过将ID移至另一个元素来固定它。 ID应该唯一地标识元素(因此称为“ ID”)-随意移动它会带来麻烦。
请确保您的Rails代码在创建<select
时为其设置了正确的ID。根据您的评论,正确的总体代码应为:
<span id="msQuotedBySearch">
<b>Filter by Initials: </b>
<%= collection_select(:msQuotedBy, :select, User.all, :initials, :initials) %>
</span>