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> 

この

ある がULにタグを選択変更することです オプションを lに設定すると、この方法でドロップダウンメニューをカスタマイズできます。

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はあなたが探しているようなことをするためのものではありません。フォームを作成するために構築されています。私は<select>を<ul>で偽造しようとしているが、それは典型的なフォーム動作ではない。
通常のビューヘルパーメソッドを使用して<ul>を作成したいだけです。次に、JSを使用して、ステージの変更を非表示の入力フィールドに保存する必要があります。このフィールドは、残りのフォームとともにPOSTされます。 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クラスをに追加するだけです。

例のような <%= 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'} %>