javascript - 使用 collection_select() 过滤 fullCalendar() 上的事件

Question

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

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