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

现在我想要做的是改变选择标签为UL和选项到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宝石，并简单地将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'} %>