为什么form_for + select2在html和下拉菜单（：collection）上创建“ select”和“ span”容器不起作用？

Question

我正在尝试生成一个带有下拉框的simple_form，用户应在其中选择两个电子邮件地址之一。该代码已配置了select2。

我的红宝石（苗条）代码是：

.reveal.doubt id="doubt-material-#{material.id}" data-reveal=true
  = simple_form_for [:student, trail, component, material, material_student, doubt], html: { id: "doubt" }, remote: true do |f|
    = f.input :recipient, :collection => %w[contato@seed.com suporte@seed.com], label: "#{t 'students.materials.index.questions.form_send_email'}", include_blank: "#{t 'students.materials.index.questions.form_blank_line'}"

scss是（引起怀疑和怀疑）：

.reveal.doubt
  p, h5
    text-align: center
    margin: 0
  p
    margin-bottom: 20px
  h5
    margin-bottom: 10px
  .text-center
    margin-top: 20px
  #doubt
    text-align: center
    display: block
    label
      text-align: left
    .button
      margin-top: 20px
      &:hover
        margin-top: 18px

在inspect html上生成以下内容：

显然，代码错误地创建了两个相互冲突的容器（“选择”和“跨度”），这应该是下拉框（下图）不起作用的原因（当我单击它时，电子邮件选项没有出现）。

当我单击下拉框时，唯一发生的就是html的更改。

从此：

为此：

我是否应该做任何设置（在simple_form集合和select2之间）以使其起作用？那是问题吗？