將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'} %>