Rails simple_form 集合到 %ul？

Question

所以我会直接问。

这是来自我的 simple_form 的输入

= f.input :focus, collection: [[t('alg.focus.execution'), 'Execution'], [t('alg.focus.management'), 'Management'], [t('alg.focus.client'), 'Client'], [t('alg.focus.development'), 'Development']], :wrapper => :inline_checkbox, :include_blank => false, label: t('recruiter.jobs.new.focus')

html 中的输出是这样的

<div class="select required job_focus">
<select class="select required" name="job[focus]" id="job_focus">          
<option value="Execution">Execuție</option>
<option value="Management">Management</option>
<option value="Client">Client</option>
<option value="Development">Dezvoltare</option></select></div>

现在我要做的是将 select 标签更改为 ul 和 option 更改为 li，这样我就可以根据需要自定义下拉菜单了。

我在 simple_form 中找到了一种方法，您可以将包装类添加到标记或使用另一个标记而不是其他标记，但正如我所见，仅限于某些标记，如输入、标签、错误等。但是我找不到如何更改选择和选项。

通过将此元素添加到输入:wrapper => :inline_checkbox,

并将其添加到 simple_form.rb 中

config.wrappers :inline_checkbox, :error_class => 'error' do |b|

  b.use :html5
  b.use :input
  b.use :label
  b.wrapper :tag => 'div', :class => 'controls' do |ba|
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

所以我需要你的帮助。 提前致谢。

Answer 1

你看错了。 SimpleForm 不是为做您正在寻找的事情而构建的。它是用来制作表格的。我知道您试图用<ul> 伪造<select>，但这不是典型的表单行为。
您只需要使用普通视图辅助方法创建<ul>。然后，您需要使用 JS 将任何阶段更改保存到一个隐藏的输入字段，该字段将与您的表单的其余部分一起发布。

Jquery 中的示例

function customSelect(){
  // Iterate over each select element
  $('select').each(function () {
      // Cache the number of options
      var $this = $(this),
          numberOfOptions = $(this).children('option').length;

      // Hides the select element
      $this.addClass('s-hidden');

      // Wrap the select element in a div
      $this.wrap('<div class="selects"></div>');

      // Insert a styled div to sit over the top of the hidden select element
      $this.after('<div class="styledSelect"></div>');

      // Cache the styled div
      var $styledSelect = $this.next('div.styledSelect');

      // Show the first select option in the styled div
      $styledSelect.text($this.children('option').eq(0).text());

      // Insert an unordered list after the styled div and also cache the list
      var $list = $('<ul />', {
          'class': 'options'
      }).insertAfter($styledSelect);

      // Insert a list item into the unordered list for each select option
      for (var i = 0; i < numberOfOptions; i++) {
          $('<li />', {
              text: $this.children('option').eq(i).text(),
              rel: $this.children('option').eq(i).val()
          }).appendTo($list);
      }

      // Cache the list items
      var $listItems = $list.children('li');

      // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
      $styledSelect.click(function (e) {
          e.stopPropagation();
          $('div.styledSelect.active').each(function () {
              $(this).removeClass('active').next('ul.options').hide();
          });
          $(this).toggleClass('active').next('ul.options').toggle();
      });

      // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
      // Updates the select element to have the value of the equivalent option
      $listItems.click(function (e) {
          e.stopPropagation();
          $styledSelect.text($(this).text()).removeClass('active');
          $this.val($(this).attr('rel'));
          $list.hide();
          /* alert($this.val()); Uncomment this for demonstration! */
      });

      // Hides the unordered list when clicking outside of it
      $(document).click(function () {
          $styledSelect.removeClass('active');
          $list.hide();
      });

  });

}

然后在文档准备好后，只需单击一下，即可在任何需要的地方调用此函数。

Answer 2

您可以使用https://github.com/Slashek/bootstrap-select-rails gem 并将selectpicker 类添加到input_html。

例如 <%= f.input :sharing_policy, label: t('portal_new.privacy.share_designs'), collection: sharing_policy_options, selected: current_school[:sharing_policy], include_blank: false, include_hidden: false, input_html: {class: 'selectpicker'} %>