<%= f.select :co" /> <%= f.select :co" /> <%= f.select :co"/>

Custom dropdown label for 'options_for_select' & 'options_from_collection_for_select'

41 views Asked by At

I have a rails app where I have few dropdown rendered as follows

<div class="col-12 col-md-12 col-lg-3 my-3 px-0 px-lg-2 my-lg-auto">
    <%= f.select :course_ids, options_from_collection_for_select(Course.courses_shown_on_tp_filters.order(name: :asc), "id", "name", params[:course_ids]), {prompt: "Select courses"}, { :class => 'pr-filter-input form-control selectpicker', data: { live_search: 'true' }, multiple: 'true', id: 'courses-filter' } %>
</div>
<div class="col-12 col-md-12 col-lg-3 my-3 px-0 px-lg-2 my-lg-auto">
    <%= f.select :industry, options_for_select(Industry.all.order(name: :asc).map(&:name), selected: params[:industry] || nil), {prompt: "Select Industry"}, { :class => 'pr-filter-input form-control selectpicker', data: { live_search: 'true' }, id: 'industry-filter' } %>
</div>

and

<div class="col-12 col-md-12 col-lg-3 my-3 px-3 px-lg-2 my-lg-auto">
     <%= f.select :experience, options_for_select(['0-5', '6-10', '11-15', '16-20', '20+'], selected: params[:experience] || nil), {prompt: "Select experience"}, { class: "form-control selectpicker with-border pr-filter-input", data: { live_search: 'true' }, id: "experience-filter" } %>
</div>
<div class="col-12 col-md-12 col-lg-3 my-3 px-0 px-lg-2 my-lg-auto">
     <% skills = TrainerProfile.all.map{|tp| tp.skillset.skills if tp.skillset.present?}.flatten.compact.uniq.reject { |sk| sk.empty? } %>
     <%= f.select :skills, options_for_select(skills, selected: params[:skills] || []), {prompt: "Select skills"}, { :class => 'form-control selectpicker pr-filter-input', data: { live_search: 'true' }, multiple: 'true', id: "skills-filter" } %>
</div>

There are 4 dropdowns shown above. For the dropdown for industries ( the 2nd one), I am rendering a label inside the dropdown that says "Select Industry" before any industry is selected from the dropdown. Same with the experience dropdown (3rd) that reads "Select experience" in the dropdown before anything is selected.

However for the other 2 dropdowns ( courses & skills ) the label is not showing up because multiple is set to true. If this condition is removed the prompt message is shown as dropdown label. I want to have both the capabilites where I can select multiple options from a dropdown as well as the prompt should read "Select courses" or "Select skills" much like the Industries and Experience, instead of reading "Nothing Selected".

Please refer to below pictures for more.

enter image description here

enter image description here

P.S. All of the dropdowns have the first dropdown options as the prompt messages ( including the multiple: 'true' ones.

0

There are 0 answers