使用 collection_select() 过滤 fullCalendar() 上的事件答案

【问题标题】：Using collection_select() to filter events on fullCalendar()使用 collection_select() 过滤 fullCalendar() 上的事件
【发布时间】：2019-01-01 14:25:19
【问题描述】：

在我的页面上，我使用下拉框来筛选在我的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() 或其他方法过滤我的日历有什么想法吗？

【问题讨论】：

<%= collection_select(:user, :initials, User.all, :id, :initials) %> 我们不知道这段代码会生成什么 HTML。你有没有检查过它是否创造了你所期望的？我们必须假设它创建的东西与您的手工编码版本不同，否则它应该像以前一样工作。
"我也不确定它会产生什么。"...你不需要知道 rails 就知道了。您只需要知道如何在浏览器中单击“查看源代码”按钮并查看生成的 HTML。
从您的问题中刚刚注意到的一件事....<span id="msQuotedBy">。在您的手动编码示例中，“msQuotedBy”是 select 的 id，而不是 span。在 JS 中，$('#msQuotedBy').val() 尝试从 id 为“msQuotedBy”的 HTML 元素中读取并获取其值。 <spans 没有值，但 <selects 有。通过将 ID 移动到另一个元素，您搞砸了。 ID 应该唯一地标识元素（因此是“ID”）——随意移动它是自找麻烦。确保您的 Rails 代码在创建 <select 时设置了正确的 ID。
因为我不了解 Rails，所以我不能给你建议。也许如果您查阅该功能的文档，它提供了一种将手动编码选项插入列表的方法。或者您可以在将选项传递给函数之前手动将选项添加到用户列表中，我不知道。
好的，感谢您的帮助！我将开始删除其中一些不必要的 cmets。

标签： javascript html ruby-on-rails fullcalendar

【解决方案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>

【讨论】：