Rails simple_form collection to %ul?

Question

so I will get right into asking.

This is an input from my 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')

and the output in html is this

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

Now what I want to do is to change the select tag into ul and option into li, this way I can customize the drop down menu as I want.

I have found a way in simple_form, that you can add a wrapper class to tag or to use another tag instead of other tags, but as I have seen is only limited to some tags like input, label, error etc. But I could not found how to change select and option.

by adding this element to the input :wrapper => :inline_checkbox,

and by adding this into simple_form.rb this

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

So I need your help. Thank in advance.

Selects are hard to style. You are probably looking for github.com/argerim/select2-rails — Petr Gazarov

Nicholas Nicholas · Accepted Answer · 2016-04-11T12:46:54

You're looking at this the wrong way. SimpleForm isn't build to do the kind of thing you're looking for. It's built to make forms. I get that you're trying to fake a <select> with a <ul> but that's not typical form behavior.
You'll just want to create the <ul> using normal view helper methods. Then, you'll need to use JS to make any stage changes are saved to a hidden input field that will get POSTed with the rest of your form.

Example in 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();
      });

  });

}

and then just call this function wherever you need, on a click, when the document is ready.

Rails simple_form collection to %ul?

2 Answers