Rails simple_form collection to %ul? - ruby-on-rails

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.

Answer 1

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.

Answer 2

You can use https://github.com/Slashek/bootstrap-select-rails gem and simply add selectpicker class to the input_html.
An example such as
<%= 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'}
%>